JavaScript equivalent to JQuery .next()

Question

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.

Answer 1

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.

Answer 2

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!

Answer 3

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

Answer 4

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.