jQuery显示更多div而显示更少div

Question

我需要显示更多和更少显示求和div的帮助。

我已经从codepen.io创建了这个DEMO

在这个DEMO你可以看到8 div红色的框。 我想显示总div是否大于4，然后显示更多链接，当我单击显示更多链接时，我可以在同一页面中看到所有div 。 任何人都可以帮助我解决这个问题吗？

<div class="container">
  <div class="post_wrap">
    <div class="pst">
      Post 1
    </div>
     <div class="pst">
      Post 2
    </div>
     <div class="pst">
      Post 3
    </div>
     <div class="pst">
      Post 4
    </div>
     <div class="pst">
      Post 5
    </div>
     <div class="pst">
      Post 6
    </div>
     <div class="pst">
      Post 7
    </div>
     <div class="pst">
      Post 8
    </div>
    <div class="test"><a href="">Show More</a></div> 
  </div>
  <div class="post_wrap">
    <div class="pst">
      Post 1
    </div>
     <div class="pst">
      Post 2
    </div>
     <div class="pst">
      Post 3
    </div>
     <div class="pst">
      Post 4
    </div>
     <div class="pst">
      Post 5
    </div>
     <div class="pst">
      Post 6
    </div>
     <div class="pst">
      Post 7
    </div>
     <div class="pst">
      Post 8
    </div>
    <div class="test"><a href="">Show More</a></div> 
  </div>
</div>

Answer 1

CSS

div.test { display:none }

jQuery的

1）首先，选择类别为'.post_wrap'的每个元素

$('.post_wrap')

2）然后，使用each（）函数，jquery遍历DOM中找到的每个.post_wrap元素，并使用.pst类对子div进行计数

$(this).find('div.pst').length;

更详细地

$（this）指的是应用了each（）函数的元素，在这种情况下，是$（'post_wrap'）find（）函数搜索所应用的元素并找到被告知要查找的内容，在这种情况下，找到每个div.pst元素，然后，长度对找到的元素进行计数

并将结果存储在名为“ divNum”的变量中

现在，id divNum大于4

if (divNum > 4)

显示div.test元素

$('div.test').show()

$('.post_wrap').each(function() {
    var divNum = $(this).find('div.pst').length;
    if (divNum > 4) {
        $('div.test').show();
    }
}) 

然后，如果dv.test是可见的：

$('div.test').click(function() {
    // show more divs
})

编辑->您的密码笔

检查密码笔

jQuery的

$ShowHideMore = $('.post_wrap');
$ShowHideMore.each(function() {
var $times = $(this).children('.pst');
if ($times.length > 5) {
    $ShowHideMore.children(':nth-of-type(n+5)').addClass('moreShown').hide();
    $(this).find('span.message').addClass('more-times').html('+ Show more');
}
});

$(document).on('click', '.post_wrap > span', function() {
var that = $(this);
var thisParent = that.closest('.post_wrap');
if (that.hasClass('more-times')) {
thisParent.find('.moreShown').show();
that.toggleClass('more-times', 'less-times').html('- Show less');
} else {
thisParent.find('.moreShown').hide();
that.toggleClass('more-times', 'less-times').html('- Show more');
}  
});