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因为它只能找到 sibling 。
如果我这样做 $('.x') ，它找到所有，但我必须迭代/比较。
有更好的解决方案吗？

另请参阅:http://jsfiddle.net/JZ9VW/1/ .

Answer 1

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

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

之所以可行，是因为元素是按文档顺序选择的。您只需在页面加载时选择所有 .x 元素一次(如果它们不是动态创建的)。