Geek Answers Handbook

JQuery to get the next match in the DOM after a specific element

I hate to admit it, but I'm stuck trying to figure out how to do it.

eg. Pretending you have the following structure:

<div> ... <div> <ul> <li> <a href="..."><img class="foo"/></a><!-- "previous" --> </li> <li> <a href="..."><img class="bar"/></a> </li> <li> <a href="..."><img class="foo"/></a><!-- I'm at this node --> </li> <li> <a href="..."><img class="baz"/></a> </li> <li> <a href="..."><img class="foo"/></a><!-- "next" 1 --> </li> </ul> </div> ... <div> <ul> <li> <a href="..."><img class="foo"/></a><!-- "next" 2 --> </li> <li> <a href="..."><img class="baz"/></a> </li> <li> <a href="..."><img class="foo"/></a><!-- "next" 3 --> </li> <li> <a href="..."><img class="bar"/></a> </li> </ul> </div> </div>

I am in the jQuery event handler associated with the highlighted "foo" node above. I want to find the next img element, which is "foo" .

There are 2 problems.

  • I only want to select the "foo" elements that are in the DOM than the current node on which I am (for example, the "previous" foo, but the current foo are not needed)
  • Although I showed nesting as the next exact pattern, the generated code is / can be nested at any level ... so I can't just do .parent (). parent (). parent (). siblings (). find () ... etc.

If you can imagine that every time the browser adds a node to the DOM, it increments the counter and assigns the node this index ... which you could get ... what I want:

 var here = $(this).getIndexInDOM();//eg returns 347 $('img.foo').each(function(){ if($(this).getIndexInDOM() > here){//is this past our current index? doSomething($(this));//use it break; } });

The .getIndexInDOM() method obviously does not exist in jQuery ... but I'm curious if anyone has a solution to get the next element that I follow.

The only solution that I can think of at the moment is really elegant and will be pretty lousy if in the second half of the images in the DOM ...

 //using vanilla JavaScript var thisImg = theCurrentImageIHave;//some reference to the DOM element var found = false; for(var i=0;i<document.images.length;i++){ if(found){ if(document.images[i].className == 'foo'){ doSomething(document.images[i]); break; } } else { if(document.images[i] == thisImg){ found = true; } } }
+4
source share
3 answers

Inside the click handler, try the following:

Example: http://jsfiddle.net/QVphP/ (click the blue square to add a border to the next)

 var $foo = $('img.foo'); // get all .foo images var idx = $foo.index( this ); // get the index position of "this" // relative to all the .foo images found var next = $foo.eq( idx + 1 ); // grab the .foo for the incremented index
+14
source

Check next . He does exactly what you want.

 $('img.foo').next().css('background-color', 'red');

Strike> If you want to get all the items after the currently selected item, and you know what position it takes in your DOM, you can use gt selector to select all the "more than" items.

For instance:

 $('img.foo:gt(4)')

will provide you with all the items that are “greater than” the 4th item in the selection (AKA, after, not current).

+2
source

Check this jsfiddle . Click any image with a red border ( foo ), and the next red frame (next foo ) will change to yellow.

Depending on the amount of foo you have on the page, this solution may be a little startling. But since you are not yet 1.4, this will work.

0
source

More articles:


All Articles