Question

请耐心等待。我在Wordpress中有一个循环，每页显示8个帖子。但有时循环没有8个帖子。如果发生这种情况，我想hide div 5到7.如果每页有8个帖子（8个div＆＃39; s），则显示所有8个帖子。

所以，让我说我有以下HTML

<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
<div class="post">Post 7</div>

比它只显示1到4的帖子而不是5到7的帖子。但如果我有以下HTML：

<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
<div class="post">Post 7</div>
<div class="post">Post 8</div>

它会显示所有帖子......

我一直在试验lenght，但我对jQuery很陌生。我得到了这个：console.log( $('.post').length);。这显示6所以我认为我需要用

做点什么

if .post < 8 != < 4 addClass 'hide'

所以我可以隐藏它们？或类似的东西？

Answer 1

您可以检查集合的长度，然后执行所需的操作。

在这种情况下，我们使用jQuery.filter过滤帖子，只选择那些索引大于3的帖子。过滤器使用:gt selector

var $post = jQuery(".post");
if($post.length < 8){
    $post.filter("gt:(3)").hide();
}

如果您想知道，数字是3，因为它是一个索引，从零（0）开始。然后我们逐个计数，第四个元素是索引3.因此，过滤器将选择索引大于3的所有元素（所有元素不是前4个元素） - 换句话说，第5个元素以及之后的所有其他人。

Answer 2

只需使用CSS即可完成此操作。

.post:nth-child(n+4):not(:nth-last-child(n+5)) ~ .post {
  display: none;
}

如果第四个也不是最后的第五个（这意味着共有8个元素），它会隐藏第四个之后的所有帖子。它简单，干净，并且不需要任何必要的诡计。

受this post启发的解决方案。

Answer 3

使用each（）方法，在其中写入索引的语句＆gt;那么你需要

$(document).ready(function(){
        var length =$('.post').length;
        if(length < 8 && length > 4 ){
           $('.post').each(function(i,elem){
            if(i>=4){
              $(elem).hide();
              }
           })
      }
    });

如果少于8个div，则隐藏div 5到7

3 个答案: