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/。

Answer 1

选择类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);
}

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

2 个答案: