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

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

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

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