javascript - 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" ...>.

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

我不能使用nextAll，因为它只能找到兄弟姐妹。
如果我这样做$('.x')，它会找到所有，但我将不得不迭代/比较。
有更好的解决方案吗？

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

Answer 1

选择所有具有 class 的元素x，计算当前元素的索引，得到索引+1的元素：

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

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

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