javascript - this子元素 - jQuery:找到不是兄弟的下一個元素




js所有子元素 (2)

假設我有以下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/http://jsfiddle.net/JZ9VW/1/


你可以使用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);
}

選擇具有類x所有元素,計算當前元素的索引並獲取索引為+ 1的元素:

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

這是有效的,因為元素是按文檔順序選擇的。 您只需在頁面加載時選擇所有.x元素(如果它們不是動態創建的)。





jquery