JQuery - подсчет списка детей, не содержащих div с классом

У меня есть простой js script, который подсчитывает количество детей, которые имеют неупорядоченный список. Я пытаюсь изменить script, поэтому он не учитывает никаких дочерних элементов (li), которые содержат div с классом "hiddenItem". Здесь список и 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 элемента из-за последнего элемента списка, содержащего div с классом "hiddenItem". Я попытался использовать .filter(), а также несколько других методов перечеркивания без везения. У кого-нибудь есть лучшая идея?

Здесь рабочая скрипка: http://jsfiddle.net/YeDdq/1/

Любая помощь будет оценена по достоинству. Спасибо!

Ответ 1

Вы можете использовать метод not.

var tcount = $("#dlist > li").not(':has(div.hiddenItem)').length;

Или filter метод:

var tcount = $("#dlist > li").filter(function(){
                 return $('div.hiddenItem', this).length === 0;
             }).length;

Ответ 2

. не работает, и это более читаемо:

$('#dlist > li').not('.hiddenItem').length;

Изменить: просто понял, что первый ответ также не указан. но я не уверен, почему они сделали его настолько сложным с псевдо-классом has.

Ответ 3

Фильтр обязательно должен захотеть в этом случае. С вашей скрипки:

$(".count").click(function () {
    var tcount = $("#dlist").children("li")
    .filter(function() { return !($(this).children().is('.hiddenItem')); })
    .length;
    alert(tcount);
});

Я обновил вашу скрипку, чтобы отразить это: http://jsfiddle.net/YeDdq/8/

Ответ 4

Вы можете использовать кнопки: not и: has

$(function() {
    var tcount = $("#dlist li:not(:has(.hiddenItem))").length;
    alert(tcount);
});

Ответ 5

Попробуйте следующее:

var tcount = $("#dlist > li").filter(function(){
                                         return $(this).find(".hiddenItem")
                                                       .length==0;
                                     }).length