jQuery：查找下一个不是兄弟元素的元素

Question

假设我有以下的HTML代码：

<span>
    <span id="x1" class="x">X1</span>
</span>
<span>
    <span>
        <span id="x2" class="x">X2</span>
    </span>
</span>

而且$(this)是<span id="x1" ...>。

使用jQuery查找下一个匹配.x的元素，最好的方法是什么？
实际文档的结构不可预测，所提供的HTML只是一个示例。

我不能使用nextAll，因为它只能查找同级元素。
如果我使用$('.x')，它会找到所有匹配的元素，但我需要迭代/比较。
是否有更好的解决方案？

另请参见：http://jsfiddle.net/JZ9VW/1/。

- Andrey Shchekin

Answer 1

选择所有类名为x的元素，计算当前元素的索引，并获取具有索引+1的元素：

```javascript $(".x").each(function(index) { var nextElem = $(".x").eq(index + 1); // do something with nextElem }); ```

var $x = $('.x');
var $next = $x.eq($x.index(this) + 1);

这是因为元素是按文档顺序选择的。您只需要在页面加载时选择所有.x元素一次（如果它们不是动态创建的）。

- Felix Kling

---

谢谢，我不知道index()这个函数。SO允许的时候我会接受答案的（有时间限制）。 - Andrey Shchekin

我的意思是，.index 可能只是在迭代元素，但至少你不必显式地这样做。据我所知，如果您不知道节点之间的任何其他关系，这是唯一的方法。 - Felix Kling

这比遍历整个树并使用 prevAll() 等函数要好得多！谢谢！ - Matt Komarnicki

Answer 2

您可以使用xpath：

document.evaluate('following::*[@class="x"], elt, null, XPathResult.ANY_TYPE, null);

或者您可以使用助行器：

var walker = document.createTreeWalker(elt, NodeFilter.SHOW_ELEMENT, function(node) {
    return node.classList.has('x');
});

while (walker.nextNode) {
    do_something_with(walker.currentNode);
}

- user663031

---

我理解你的观点，但除非这是关键路径（对我来说不是），否则增加的复杂性将超过性能收益。另外，你确定要使用几个数量级吗？无论如何，它应该在内部使用 querySelector。 - Andrey Shchekin

我同意直接处理DOM通常更快，但如果你这样说，你应该用http://jsperf.com/测试来支持你的说法。 - Felix Kling