CODEWITHSUNDEEP
javascriptsiblings
Howdy_McGee
Howdy_McGee

Reputation: 10645

JavaScript equivalent to JQuery .next()

Is there a JavaScript method similar to jQuery .next()? I want to find the next element that has the class of "error" relative to the element. I've tried using .nextSibling as a loop but couldn't figure it out. Didn't know if there was an easier way to go about it without jQuery.

For instance, if I have this code:

<div id="section">
    <div id="test">test</div>
    <span class="info">Information</span>
    <span class="error">Error!</span>
</div>

I'm trying to get the next .error class closest to #test, if I have a #section2 and a #test2 I would want to get the .error class closest to #test2 and so on.

Upvotes: 14

Views: 13676

Answers (4)

swartkatt
swartkatt

Reputation: 388

The nextElementSibling property returns the element immediately following the specified element, in the same tree level.

Example: Get the HTML content of the next sibling of a list item:

var x = document.getElementById("item1").nextElementSibling

The nextElementSibling property might help.

Upvotes: 15

Ringo
Ringo

Reputation: 3965

This is the pure javascript for you:

HTML 

<div id="nodes">
    <div class="error">This is error Node</div>  
    <div class="nextElement">This is next Element</div>
</div>

Javscript: 

var nodes = Array.prototype.slice.call( document.getElementById('nodes').children ),
    errorNode = document.getElementsByClassName('error')[0];
var indexOfError = nodes.indexOf(errorNode);
var nextElement = nodes[indexOfError + 1];
alert(nextElement.innerText);

Here is demo

Upvotes: 2

Hylianpuffball
Hylianpuffball

Reputation: 1561

Sounds like you may be looking for document.getElementsByClassName()... if the elements with class=error are not direct siblings in the DOM, then there's not a good way to find them otherwise. It's elementary, but you can just search through the array returned by document.getElementsByClassName('error') until you find your starting element, and then you know the next item in the array will be the next element in the DOM.

See also MDN reference. Won't work in old IE, but works for all modern browsers.

Upvotes: 0

kmiklas
kmiklas

Reputation: 13433

Best bet would be to search through the jQuery code and see what they did. http://code.jquery.com/jquery-2.0.3.js

At a glance, I do see some calls to "nextSibling" and "previousSibling."

Also see here: How to get next element using JavaScript-only?

Hope this helps!

Upvotes: 3

Related Questions