I'm given a jQuery object $myObject and a DOM element myElement contained in $myObject.
How can I find the next DOM element contained in $myObject right after myElement?
3 Answers
Pure JavaScript:
var nextElement = myElement.nextSibling;
Edit: Reading some of your comments, it looks like I may have misunderstood what you are looking for. You mention that your elements are added to $myObject using .add(). It sounds like you are trying to access the elements in the order they were added to $myObject. Is that right? Elements are stored in a jQuery object in the order they appear in the DOM. The order they are added to the jQuery object is not preserved. You can get the next element in the set of matched elements using .index() to find the position of myElement and then get the next one:
var idx = $myObject.index(myElement);
var nextElement = $myObject[idx + 1];
But the next element will be according to DOM order, not the order the elements were added. To get that, you'd need to store the order yourself.
See this demo: http://jsfiddle.net/gilly3/Z96Gd/
Comments
Wrap the DOM element myElement in a $, so that JQuery methods can be used. Then, use $(myElement).next().get(0). next() moves to the next element, while get(0) returns the first DOM element of the selector.
Instead of using JQuery methods, you can also switch to native DOM properties, such as myElement.nextSibling.
7 Comments
Randomblue
This doesn't work because the elements of
$myObject are in no particular order. There is no selector attached to $myObject. Also, your answer doesn't seem to be using $myObject in any way...
Rob W
@Randomblue, Quoted from the question:
How can I find the next DOM element contained in $myObject right after myElement. I don't need the $myObject variable to get the next element after myElement. If this seems weird to you, consider: Do you have to know the size of your house in order to find your kitchen next to the living room?Randomblue
Ok, I've clearly miscommunicated. I want the DOM element after
myElement contained in $myObject.Rob W
Then use the code in my answer. You do not need the container to get the element after a given element. Do I have to know the top of a tree in order to know which leaf is next to a branch?
Randomblue
The elements of
$myObject have been added arbitrarily using .add(). The order of elements does not respect the DOM tree ordering. |
use myElement.next()
http://api.jquery.com/next/
1 Comment
James Khoury
@Randomblue if you have
myElement and a DOM Element then $(myElement).next() will work fine. .Next() also accepts no selector.
$myObjectis something like$("#arbitraryElement1, #arbitraryElement2, ..., #arbitraryElementN"), and you have a reference to DOM element with id "arbitraryElement1", and you want to get back a reference to DOM element with id "arbitraryElement2"? Ie, you want to get a reference to the next element in the set of matched elements, regardless of their relative positions in the DOM hierarchy. Have I got that right?