Jquery顯示更多div和顯示更少div

Question

我需要幫助顯示更多和顯示較少爲總和格。

我創造了這個DEMO從 codepen.io

在這種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 div

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

更詳細

的$（本）是指各（）函數被應用到，在這種情況下，$（ 'post_wrap'） 這一發現的元素（）函數搜索到應用的元素，發現它被告知發現，在這種情況下，找到每個div.pst元素 而且，長度計數找到的元素

和結果存儲在一個名爲「divNum」

變量0

現在，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 
}) 

編輯 - >您代碼筆

檢查CodePen

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'); 
} 
});