Using jQuery to return next list item in a filtered list.

Question

I have the following list

<ul>
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li>Item 3</li>
  <li id="item4">Item 4</li>
</ul>

Using jQuery, I'm trying to traverse the list of LIs whose IDs start with "item".

var nextItemWithItemID = $("#item2").next("li[id^='item']);

However, when I run this code, I end up retrieving "Item 3" rather than "Item 4".

How can I get jQuery to get the proper next item from a filtered list of LIs?

Answer 1

You want to use nextAll(). Next is only going to retrieve the sibling immediately following the current element. NextAll() will consider all of the following siblings.

var nextItemWithItemID = $('#item2').nextAll('li[id^=item]:first');

Answer 2

I was having this problem last night. While @tvanfosson provides a way to get to all of the succeeding siblings, if you want the next item that matches that criteria, I came up with the following solution (adapted to your example):

var nextItemWithItemID = $("#item2").nextUntil("li[id^='item']").andSelf().next();

That's it. Using nextUntil() grabs everything until the term, but not including it, so you have to use next(). But if the returned set is empty (if there's nothing between your initial selector and the next thing that matches your query), that won't work--andSelf() solves that.