我想单独标记每个div的计数,但是它给出了全长。在我的情况下,我不想要全长我需要每个div标签计数。为了做到这一点,我每个人都使用jquery,但它给出了错误的数量,请有人帮助我..
如果标签数量大于5,我想加载+否则它应该隐藏。 HTML代码,
$('.list-group-item').each(function() {
var label_count = 0;
label_count = $(this).find('label').length;
alert(label_count);
// alert(label_count);
$(this).find('label:gt(4)').hide();
// count++;
if (label_count > 4) {
//alert(count);
$(".loadMore").show();
}
// else
// {
// $(".loadMore").show();
// }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group cat_fltr">
<a class="list-group-item fltrHdng">Size</a>
<div class="list-group-item">
<div id="filter-group10" class="cf">
<!--<input type="text" id="dino-search_10" placeholder="Search By Size"> -->
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="59" />S
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="60" />M
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="61" />L
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="62" />XL
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="63" />XXL
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="143" />XS
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">FABRIC</a>
<div class="list-group-item">
<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>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">Brands</a>
<div class="list-group-item">
<div id="filter-group22" class="cf">
<!--<input type="text" id="dino-search_22" placeholder="Search By Brands"> -->
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="149" />Go Colors</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="150" />Comfort Lady</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="151" />Morrio
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="152" />Twin Birds</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="153" />Fashion For U (FFU)</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">Style</a>
<div class="list-group-item">
<div id="filter-group12" class="cf">
<!--<input type="text" id="dino-search_12" placeholder="Search By Style"> -->
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="154" />Casual
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="155" />Ethnic
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">Length</a>
<div class="list-group-item">
<div id="filter-group17" class="cf">
<!--<input type="text" id="dino-search_17" placeholder="Search By Length"> -->
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="114" />Full
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="117" />Ankle
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="156" />3/4
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="157" />Capri
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
</div>
答案 0 :(得分:3)
要解决此问题,首先需要限制选择器仅查找div
类的.list-group-item
元素。从那里你需要使用$(this).find('.loadMore')
来获取当前标签集中的按钮,而不是一次影响所有标签。试试这个:
$('div.list-group-item').each(function() {
var $group = $(this);
var label_count = $group.find('label').length;
$group.find('label:gt(3)').hide();
$group.find(".loadMore").toggle(label_count > 4);
});
&#13;
.loadMore, .showLess { display: none; }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group cat_fltr">
<a class="list-group-item fltrHdng">Size</a>
<div class="list-group-item">
<div id="filter-group10" class="cf">
<!--<input type="text" id="dino-search_10" placeholder="Search By Size"> -->
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="59" />S
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="60" />M
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="61" />L
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="62" />XL
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="63" />XXL
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="143" />XS
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">FABRIC</a>
<div class="list-group-item">
<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>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">Brands</a>
<div class="list-group-item">
<div id="filter-group22" class="cf">
<!--<input type="text" id="dino-search_22" placeholder="Search By Brands"> -->
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="149" />Go Colors</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="150" />Comfort Lady</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="151" />Morrio
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="152" />Twin Birds</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="153" />Fashion For U (FFU)</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">Style</a>
<div class="list-group-item">
<div id="filter-group12" class="cf">
<!--<input type="text" id="dino-search_12" placeholder="Search By Style"> -->
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="154" />Casual
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="155" />Ethnic
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
<a class="list-group-item fltrHdng">Length</a>
<div class="list-group-item">
<div id="filter-group17" class="cf">
<!--<input type="text" id="dino-search_17" placeholder="Search By Length"> -->
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="114" />Full
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="117" />Ankle
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="156" />3/4
</label>
<label class="checkbox cb_test">
<input name="filter[]" type="checkbox" value="157" />Capri
</label>
<button class="loadMore" title="Load more">+</button>
<button class="showLess" title="Load more">-</button>
</div>
</div>
</div>
&#13;
请注意,:gt
选择器使用从零开始的元素索引,因此您需要使用:gt(3)
来隐藏除前四个元素之外的所有元素。