2017-02-16 6 views
-1

divのラベル数を取得したいと思い、そのdivのすべてのラベルの数を取得しています。実際に+ボタンはラベルの数が5以上の場合に表示されます。それ以外の場合はjqueryを使用してそのボタンを隠していますが、実際にはラベルの数が5以上の場合はカウントとともに表示されます。たとえば、6つのラベルが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') 
    } 
}); 
を試してみてください...ボタンが表示され、またそれが表示されるはず1以上が、私はいくつかの体のヘルプを喜ば欲しいものであるが意味している場合

Fiddle Demo

私は約8つのラベルを追加しました。それで+3が表示されます

関連する問題