Jquery: добавить определенный класс в последнюю строку сетки div

Я работаю над небольшим, отзывчивым приложением для ведения блога. Сообщения отображаются в виде полей.

Я хотел бы добавить ко всем сообщениям в последней строке класс 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>

Как я мог «поймать» все эти элементы, «расположенные дальше всех», и добавить каждому из них имя класса?

Конечно, я хочу, чтобы эта коллекция предметов пополнилась на $(window).resize().

Он реагирует, поэтому вы хотите, чтобы только эти ячейки (div) в последней строке получали класс? Я правильно понял?

Jamiec 10.08.2018 16:46

Используйте селектор :last.

Joseph Webber 10.08.2018 16:48

@Jamiec Да, можно использовать $(window).resize().

Razvan Zamfir 10.08.2018 16:48
0
3
63
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете сделать это за 2 шага

  1. Найдите максимальную верхнюю позицию
  2. отфильтруйте ячейки, чтобы найти те, которые имеют максимальную верхнюю позицию, и примените любое преобразование, которое вам нравится (в моем примере просто применяется класс last-row)

Дополнительной сложностью этого метода является необходимость пересчета при изменении размера.

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> на одной странице. Как я могу это сделать?

Razvan Zamfir 27.08.2018 13:26

Скрипт работает на некоторых сетки, которые у меня есть на странице, но не на все из них. На тех, на которых он не работает, есть эта ошибка: Reduce of empty array with no initial value.

Razvan Zamfir 27.08.2018 17:30

Учитывая, что количество последних элементов вашего контейнера будет варьироваться в зависимости от размера окна (точки останова), вам следует рассмотреть возможность использования подхода CSS.

.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>

ВАЖНЫЙ: это будет работать только до тех пор, пока у вас есть полная последняя строка.

css - лучшее решение этого IMO, чем мое программное.

Jamiec 10.08.2018 17:05

Другие вопросы по теме