jQuery - Count list children not containing div with class

Question

I have a simple js script that counts the number of children an unordered list has. I'm trying to change the script so it doesn't count any children (li) which contain a div with the class 'hiddenItem'. Here's the list and the 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);
    });

In this example the js alerts that there are 4 items. But, I'm trying to change the code so it alerts 3 items, due to the last list item containing the div with the class 'hiddenItem.' I've tried to use .filter() as well as a few other transverseing methods with no luck. Anyone have a better idea?

Here's a working fiddle: http://jsfiddle.net/YeDdq/1/

Any help would be appreciated. Thanks!

score 13 · Accepted Answer · answered Feb 08 '13 at 09:11

13

You can use not method.

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

Or filter method:

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

answered Feb 08 '13 at 09:11

Ram

143,282
16
168
197

Ah, brilliant suggestion. I completely forgot about the not method and it makes plenty sense. Thanks! Cheers! – BD_Design Feb 08 '13 at 09:14
Answer accepted and here's an updated fiddle for those who come along later.. http://jsfiddle.net/YeDdq/10/ Thanks undefined! – BD_Design Feb 08 '13 at 09:23

Travis Heeter · Answer 2 · 2016-12-01T19:06:10.993

5

.not works, and it's more readable:

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

Edit: just realized the first answer also has .not listed, but I'm not sure why they made it so complicated with the has pseudo-class.

edited Dec 01 '16 at 19:06

answered Dec 21 '13 at 01:58

Travis Heeter

13,002
13
87
129

score 1 · Answer 3 · answered Feb 08 '13 at 09:13

Filter should definitely do want you want in this instance. From your fiddle:

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

I've updated your fiddle to reflect this: http://jsfiddle.net/YeDdq/8/

score 1 · Answer 4 · answered Feb 08 '13 at 09:26

1

You can use the :not and :has selectors

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

answered Feb 08 '13 at 09:26

William

8,007
5
39
43

score 0 · Answer 5 · edited Feb 08 '13 at 09:37

0

Try this:

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

edited Feb 08 '13 at 09:37

Daniel Hilgarth

171,043
40
335
443

answered Feb 08 '13 at 09:17

mikakun

2,203
2
16
24

jQuery - Count list children not containing div with class

5 Answers5