38

次の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" ...>。

.xjQueryと一致する次の要素を見つけるための最良の方法は何ですか？
実際のドキュメントの構造は予測できないため、提供されているHTMLは単なる例です。

nextAll兄弟しか見つからないので使えません。
私がそうするなら$('.x')、それはすべてを見つけます、しかし私は反復/比較しなければなりません。
より良い解決策はありますか？

http://jsfiddle.net/JZ9VW/1/も参照してください。

4

2 に答える 2

45

クラスを持つすべての要素を選択しx、現在の要素のインデックスを計算して、インデックス+1の要素を取得します。

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

これは、要素がドキュメント順に選択されるために機能します。.xページの読み込み時にすべての要素を選択する必要があるのは1回だけです（動的に作成されていない場合）。

于 2012-12-26T01:37:41.633 に答える
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);
}
于 2012-12-26T03:19:59.060 に答える