JavaScript-эквивалент JQuery .next()

Question

Есть ли метод JavaScript, похожий на jQuery .next()? Я хочу найти следующий элемент, который имеет класс «ошибка» относительно элемента. Я пробовал использовать .nextSibling как петлю, но не мог понять. Не знал, есть ли более простой способ обойти это без jQuery.

Например, если у меня есть этот код:

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

Я пытаюсь получить следующий .error класс, наиболее близкий к #test, если у меня есть #section2 и #test2 Я хотел бы получить .error класс ближе к #test2 и так далее.

Answer 1

Это чистый Javascript для вас:

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); 

Вот demo

Answer 2

Лучшая ставка будет заключаться в поиске кода jQuery и ознакомлении с тем, что они сделали. http://code.jquery.com/jquery-2.0.3.js

С первого взгляда, я вижу некоторые вызовы «nextSibling» и «previousSibling».

Также см здесь: How to get next element using JavaScript-only?

Надеется, что это помогает!

Answer 3

Похоже, что вы можете искать document.getElementsByClassName() ... если элементы с классом = ошибка не являются непосредственными братьями и сестрами в DOM, тогда нет хорошего способа найти их в противном случае. Это элементарно, но вы можете просто просмотреть массив, возвращаемый document.getElementsByClassName('error'), пока не найдете свой начальный элемент, а затем вы узнаете, что следующий элемент в массиве будет следующим элементом в DOM.

См. Также MDN reference. Не будет работать в старом IE, но работает для всех современных браузеров.