JavaScript 等价于 JQuery .next()答案

【问题标题】：JavaScript equivalent to JQuery .next()JavaScript 等价于 JQuery .next()
【发布时间】：2014-01-04 16:27:06
【问题描述】：

有没有类似于 jQuery .next() 的 JavaScript 方法？我想找到下一个相对于元素具有“错误”类的元素。我尝试使用.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，我想获得最接近#test2 的.error 类等等开。

【问题讨论】：

我怀疑你可能误解了.next(selector) 的作用。它不会搜索兄弟姐妹来匹配选择器。它只是过滤，如果匹配则收集下一个兄弟，或者什么都不收集。

标签： javascript next siblings

【解决方案1】：

nextElementSibling 属性返回紧跟在同一树级别中的指定元素之后的元素。

示例：获取列表项下一个兄弟的 HTML 内容：

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

nextElementSibling 属性可能会有所帮助。

【讨论】：

nextElementSibling 只返回 next sibling 元素而不是 next 元素。例如，如果我们有分层元素，它只会返回父块中元素的下一个元素

【解决方案2】：

最好的办法是搜索 jQuery 代码，看看他们做了什么。 http://code.jquery.com/jquery-2.0.3.js

乍一看，我确实看到了一些对“nextSibling”和“previousSibling”的调用。

另见此处： How to get next element using JavaScript-only?

希望这会有所帮助！

【讨论】：

【解决方案3】：

这是给你的纯 JavaScript：

HTML

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

JavaScript：

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

【讨论】：

【解决方案4】：

听起来您可能正在寻找document.getElementsByClassName()... 如果具有 class=error 的元素不是 DOM 中的直接兄弟，那么就没有找到它们的好方法。这是基本的，但您可以搜索document.getElementsByClassName('error') 返回的数组，直到找到您的起始元素，然后您知道数组中的下一项将是 DOM 中的下一个元素。

另见MDN reference。不适用于旧版 IE，但适用于所有现代浏览器。

【讨论】：