我有一个简单的js脚本,用于计算无序列表所具有的子节点数。我正在尝试更改脚本,因此它不会计算包含类“hiddenItem”的div的任何子项(li)。这是列表和js。
<ul id="dlist" class="sortable">
<li id="listItem_000002">
<div>
<div><a class="itemCollapse"></a>
</div>Item 2</div>
</li>
<li id="listItem_000003">
<div>
<div><a class="itemCollapse"></a>
</div>Item 3</div>
</li>
<li id="listItem_000009">
<div>
<div><a class="itemCollapse"></a>
</div>Item 9</div>
</li>
<li id="listItem_000012">
<div class="hiddenItem">
<div><a class="itemCollapse"></a>
</div>Item 12 (Hidden)</div>
</li>
</ul>
<br>
<br>
<a class="count">Count</a>
$(".count").click(function () {
var tcount = $("#dlist").children("li").length;
alert(tcount);
});
在此示例中,js警告有4个项目。但是,我正在尝试更改代码,因此它会警告3个项目,因为最后一个列表项包含具有类“hiddenItem”的div。我试过使用.filter()以及其他一些横向方法而没有运气。任何人都有更好的主意吗?
这是一个工作小提琴:http://jsfiddle.net/YeDdq/1/
任何帮助将不胜感激。谢谢!
答案 0 :(得分:11)
您可以使用not
方法。
var tcount = $("#dlist > li").not(':has(div.hiddenItem)').length;
或filter
方法:
var tcount = $("#dlist > li").filter(function(){
return $('div.hiddenItem', this).length === 0;
}).length;
答案 1 :(得分:4)
.not有效,而且更具可读性:
$('#dlist > li').not('.hiddenItem').length;
编辑:刚刚意识到第一个答案也没有列出,但我不确定为什么他们使has
伪类变得如此复杂。
答案 2 :(得分:1)
过滤器绝对应该在这个实例中想要你想要的。从你的小提琴:
$(".count").click(function () {
var tcount = $("#dlist").children("li")
.filter(function() { return !($(this).children().is('.hiddenItem')); })
.length;
alert(tcount);
});
我已经更新了你的小提琴以反映这一点: http://jsfiddle.net/YeDdq/8/
答案 3 :(得分:1)
您可以使用:not和:has selectors
$(function() {
var tcount = $("#dlist li:not(:has(.hiddenItem))").length;
alert(tcount);
});
答案 4 :(得分:0)
试试这个:
var tcount = $("#dlist > li").filter(function(){
return $(this).find(".hiddenItem")
.length==0;
}).length