2012-12-26 10 views
34

ではありません。jQueryの:次の要素を探すのは、私が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/

答えて

40

、クラスxを持つすべての要素を選択し、現在の要素のインデックスを計算し、指数+ 1を持つ要素を取得する:要素はドキュメント順に選択されているので、これは動作します

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

。ページロード時にすべての.x要素を一度選択する必要があります(動的に作成されていない場合)。

document.evaluate('following::*[@class="x"], elt, null, XPathResult.ANY_TYPE, null); 

たり、歩行器使用できます:あなたは、XPath使用することができ

+1

おかげで、私は '指数()'知りませんでした。私が許してくれると受け入れる(時間制限)。 –

+0

つまり、 '.index'はおそらく要素を繰り返し処理しているだけですが、少なくとも明示的に行う必要はありません。 AFAIKこれはノード間の他の関係がわからない場合の唯一の方法です。 –

+0

これは私が必要としていたものです。ありがとうございました。 –

1

var walker = document.createTreeWalker(elt, NodeFilter.SHOW_ELEMENT, function(node) { 
    return node.classList.has('x'); 
}); 

while (walker.nextNode) { 
    do_something_with(walker.currentNode); 
} 
+0

私はあなたの要点を見ていますが、それがクリティカルパスでない限り(それは私のものではありません)、複雑さがパフォーマンスの向上を上回ります。 また、数桁程度は確かですか?とにかく内部的には 'querySelector'を使うべきです。 –

+0

DOMの直接処理は一般的に高速ですが、そのような主張を行う場合は、http://jsperf.com/のテストでバックアップする必要があります。 –

関連する問題