代码之家  ›  专栏  ›  技术社区  ›  Razvan Zamfir

jQuery:向div网格的最后一行添加一个特定的类

css jquery javascript
  •  0
  • Razvan Zamfir  · 技术社区  · 6 年前

    我正在开发一个小型的、响应迅速的博客应用程序。帖子显示为框。

    我想在最后一行的所有帖子中加上 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 回复  |  直到 6 年前
        1
  •  0
  •   Jamiec    6 年前

    你可以分两步来做

    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>
        2
  •  1
  •   brunouno    6 年前

    考虑到容器的最后一个元素的计数将根据窗口大小(断点)而变化,您应该考虑使用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>

    重要的 :只有当您有一个完整的最后一行时,这才有效。

    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    3 月前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    3 月前
    magenta placenta  ·  将css变量合并为一个变量
    3 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    3 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    3 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    4 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    4 月前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    4 月前
    Luckkks  ·  过渡色工作不正常
    4 月前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    4 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号