jQuery：将特定的类添加到div网格的最后一行

时间：2018-08-10 14:43:57

标签： javascript jquery css

我正在开发一个小型的响应式博客应用程序。这些帖子显示为方框。

我想在最后一行的所有帖子中添加一个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()处更新此项目集合。

2 个答案:

答案 0 :(得分：1)

考虑到容器的最后一个元素的数量将根据窗口大小（断点）而有所不同，因此您应该考虑使用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>

重要：只有最后一行完整时，此选项才起作用。

答案 1 :(得分：0)

您可以按照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>

相关问题
最新问题