-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>