jQuery - 计数列表不包含div的子类

时间:2013-02-08 09:07:44

标签: jquery html-lists jquery-traversing

我有一个简单的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/

任何帮助将不胜感激。谢谢!

5 个答案:

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