2017-02-16 68 views
-1

我想獲得div的標籤計數,我得到該div中所有標籤的數量。其實+按鈕將設計如果標籤計數超過5,否則我隱藏該按鈕使用jquery,但實際上我想要的是,如果標籤計數超過5意味着按鈕應與計數一起出現。例如,如果6個標籤存在意味着按鈕就會出現,也多1應該展示的是我想請一些身體幫助的..jquery顯示更多標籤數量?

$('#filter-group21').each(function() { 
 
    var label_count = 1; 
 
    label_count = $(this).find('label').length; 
 
    // alert(label_count); 
 
    $(this).find('label:gt(4)').hide(); 
 
    // $(this).find('div:gt(5)').hide(); 
 
    // display load more if there are more than 5 filters 
 
    $(this).find(".loadMore").toggle(label_count > 5); 
 

 
}); 
 

 
$('.loadMore').click(function() { 
 
    $(this).next().show(); 
 
    $(this).parent().find('label').show(); 
 
    // $(this).parent().find('div').show(); 
 
}); 
 
// On click of - button need to show only top 5 filter elements 
 
$('.showLess').click(function() { 
 
    $(this).hide(); 
 
    $(this).parent().find('label').not(':lt(5)').hide(); 
 
    // $(this).parent().find('div').not(':lt(5)').hide(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="filter-group21" class="cf"> 
 
    <!--<input type="text" id="dino-search_21" placeholder="Search By FABRIC"> --> 
 
    <label class="checkbox cb_test"> 
 
       <input name="filter[]" type="checkbox" value="144" /> 
 
       Chiffon </label> 
 
    <label class="checkbox cb_test"> 
 
       <input name="filter[]" type="checkbox" value="145" /> 
 
       Corduroy </label> 
 
    <label class="checkbox cb_test"> 
 
       <input name="filter[]" type="checkbox" value="146" /> 
 
       Cotton </label> 
 
    <label class="checkbox cb_test"> 
 
       <input name="filter[]" type="checkbox" value="147" /> 
 
       Crepe</label> 
 
    <label class="checkbox cb_test"> 
 
       <input name="filter[]" type="checkbox" value="148" /> 
 
       Denim</label> 
 
    <label class="checkbox cb_test"> 
 
       <input name="filter[]" type="checkbox" value="162" /> 
 
       Silk</label> 
 
    <button class="loadMore" title="Load more">+</button> 
 
    <button class="showLess" title="Load more">-</button> 
 
    </ul> 
 
</div>

回答

0

試試這個

$('#filter-group21').each(function() { 
    var label_count = 0, 
    limit = 5; 
    label_count = $(this).find('label').length - limit; 
    $(this).find('label:gt(4)').hide(); 
    if (label_count > 0) { 
    $('.loadMore').append(label_count + 'more') 
    } 
}); 

Fiddle Demo

我已經添加了大約8個標籤。所以它會顯示+3更多