Clash Royale CLAN TAG#URR8PPP

jQuery: add a specific class to the last row of a grid of divs

I am working on a small, responsive, blogging application. The posts are displayed as boxes.

I would like to add, to all the posts on the last row, a last-row class. I am using .position().top to find the items located the farthest from the top of their parent element:

last-row

.position().top

$('.posts-grid>[class*="col-"]').each(function()
var $item = $(this),
posTop = $item.position().top;
console.log(posTop);
);

.posts-grid
margin-top: 25px;
display: flex;
flex-wrap: wrap;


.posts-grid>[class*='col-']
display: flex;
flex-direction: column;
margin-bottom: 25px;


.posts-grid .post
background: #fff;
border-top: 1px solid #d5d5d5;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);


.posts-grid .text
padding: 8px;


.posts-grid .card-title
font-size: 1.25rem;
margin-bottom: 8px;
text-transform: capitalize;


.posts-grid .read-more
padding: 0 8px 8px 8px;


.posts-grid .text-muted
margin-bottom: 8px;


.posts-grid .thumbnail img
display: block;
width: 100%;
height: auto;


.posts-grid p
text-align: justify;


.posts-grid .post
flex-grow: 1;
display: flex;
flex-direction: column;


.posts-grid .read-more
margin-top: auto;


@media (max-width: 767px)
.container
max-width: 100%;



@media (max-width: 575px)
.container
max-width: 100%;
padding-left: 0;
padding-right: 0;

.posts-grid>[class*='col-']
padding-left: 5px;
padding-right: 5px;



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
<div class="posts-grid">
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
</div>
</div>

How could I "catch" all those items "located the farthest" and add each of them a class name?

Of course, I want this collection of items to be updated at $(window).resize().

$(window).resize()

div

:last

$(window).resize()

2 Answers
2

You could do this as 2 steps

last-row

As an extra complexity of this method, you need to recalculate on resize.

function setup()

var maxTop = $('.posts-grid>[class*="col-"]').removeClass("last-row").map(function()
var $item = $(this)
return $item.position().top;
).get().reduce( (acc,curr) => (curr>acc)? curr : acc)

$('.posts-grid>[class*="col-"]').filter( function()
var $item = $(this)
return $item.position().top == maxTop;
).addClass("last-row");



setup();
$(window).resize(setup);

.posts-grid
margin-top: 25px;
display: flex;
flex-wrap: wrap;


.posts-grid>[class*='col-']
display: flex;
flex-direction: column;
margin-bottom: 25px;


.posts-grid .post
background: #fff;
border-top: 1px solid #d5d5d5;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);


.posts-grid .text
padding: 8px;


.posts-grid .card-title
font-size: 1.25rem;
margin-bottom: 8px;
text-transform: capitalize;


.posts-grid .read-more
padding: 0 8px 8px 8px;


.posts-grid .text-muted
margin-bottom: 8px;


.posts-grid .thumbnail img
display: block;
width: 100%;
height: auto;


.posts-grid p
text-align: justify;


.posts-grid .post
flex-grow: 1;
display: flex;
flex-direction: column;


.posts-grid .last-row .post
border-bottom: 1px solid #ccc;


.posts-grid .read-more
margin-top: auto;


@media (max-width: 767px)
.container
max-width: 100%;



@media (max-width: 575px)
.container
max-width: 100%;
padding-left: 0;
padding-right: 0;

.posts-grid>[class*='col-']
padding-left: 5px;
padding-right: 5px;



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="posts-grid">
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
<div class="thumbnail"><img src="https://i.stack.imgur.com/ZeOrf.jpg"></div>
<div class="text">
<h3 class="card-title">Sunt aut facere repellat provident</h3>
<p class="text-muted ng-binding">Quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto</p>
</div>
<div class="read-more">
<a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
</div>
</div>
</div>
</div>

<div class="grid">Items here</div>

Reduce of empty array with no initial value

Considering your container's last elements' count will vary according to the window size (breakpoint), you should consider using a CSS approach.

.col-xs-12
border: solid 1px blue;


.posts-grid > div:nth-last-child(-n+1)
border: dashed 1px red;


/* use your prefered breakpoints */
/* SM */
@media screen and (min-width: 575px)
.posts-grid > div:nth-last-child(-n+2)
border: dashed 1px red;


/* LG */
@media screen and (min-width: 992px)
.posts-grid > div:nth-last-child(-n+3)
border: dashed 1px red;


/* XL */
@media screen and (min-width: 1200px)
.posts-grid > div:nth-last-child(-n+4)
border: dashed 1px red;



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
<div class="row posts-grid">
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
POST1
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
POST2
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
POST3
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
POST4
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
POST5
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<div class="post">
POST6
</div>
</div>
</div>
</div>

IMPORTANT: This will only work as long as you have a full last row.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.