I have a simple list of items, and I am dynamically disabling them by adding
a class name of "disabled" to the <li>. When I try to select the next
non-disabled item using $#next(), I am getting 'null'. But if I use
$#nextAll() and add ':eq(0)' to the selector, it works.

Here's is an example:

HTML:
<ul id="theTest">
<li class="item">First</li>
<li class="item disabled">Second (Disabled)</li>
<li class="item">Third</li>
<li class="item">Fourth</li>
</ul>

JS:
$(document).ready(function()
{
    // Get the first enabled LI element
    var first = $('#theTest li.item:not(.disabled):eq(0)');
    console.log('first item: ' + first.html()); // "First"

    // Get next enabled LI element
    var next = first.next('li.item:not(.disabled)'); // does not work
    console.log('next item: ' + next.html()); // Should be "Third" but I get
"null"

    next = first.nextAll('li.item:not(.disabled):eq(0)'); // does work
    console.log('nextAll item: ' + next.html()); // Should be "Third" but I
get "null"
});

It seems to me that $#next() gets the very next element, then tries to match
it to the selector. Is this the intended behavior?

-Hector

Reply via email to