Question

I’m trying to count the li’s of a ul. I am using jQuery size() method.

Here is a sample of my HTML:

<ul id="show-items" class="ui-sortable">
    <li id="todo-2">
        <label class="editable done">fasdfasdf</label>
    </li>
    <li id="todo-3">
        <label class="editable">fasdfasdf</label>
    </li>
    <li id="todo-4">
        <label class="editable">fasdfasdf</label>
    </li>
    <li id="todo-5">
        <label class="editable done">fasdfasdf</label>
    </li>
    <li id="todo-6">
        <label class="editable">fasdfasdf</label>
    </li>
</ul>

I use the following code to find all the lists from #show-items but I want to specify only the lists which have label and class done and the lists which haven’t got class done.

var n = $("#show-items li").size();
          $(".numb").text("There are " + n + " divs. Click to add more.");

This show’s me the lists which have the class done:

var n = $("#show-items li").find(".done").size();
          $(".numb").text("Clear " + n + " completed task.");

How can I find the lists with no class done? I tried :not(done) but it show’s my everything else apart from the lists.

So basically from the above HTML I want to get this:

You have 5 lists. 2 Lists have class done and 3 don’t.

Thanks alot

Answer 1

You were close. You can use the :not() selector like so:

// <li> without .done class on <label>
$("#show-items li").find("label:not(.done)").size();

// <li> with .done class on <label>
$("#show-items li").find("label.done").size();

Here’s an example.