0

jQuery を使用して、選択した要素の次の段落を取得しようとしていますnext()が、途中で div があるため、次が機能しないようです。代わりにどのセレクターを使用する必要がありますか?

作品：

<div>
   <span class="clickme">A name here</span>
   <p class="showme" style="display:none;">Here's some text! </p>
</div>
$('.clickme').click(function() {
   $(this).next('.showme').slideDown();
});

動作しません ：

<div>
   <span class="clickme">A name here</span>
   <div></div>
   <p class="showme" style="display:none;">Here's some text! </p>
</div>
$('.clickme').click(function() {
   $(this).next('.showme').slideDown();
});

なぜこれが起こるのですか？next()指定されたクラスは次のブロック要素を超えませんか? それがなぜこれが起こっているのですか？まさに「次の」クラスをshowme選択する必要があることを指定するセレクターはありますか?

フィドル - http://jsfiddle.net/QespX/

4

2 に答える 2

3

.next(): 一致した要素のセット内の各要素の直後の兄弟を取得します。セレクターが指定されている場合、そのセレクターに一致する場合にのみ、次の兄弟を取得します。

.nextAll():一致した要素のセット内の各要素の後続のすべての兄弟を取得します。オプションでセレクターによってフィルター処理されます。

だから、これはあなたが行く方法です

$('.clickme').click(function() { 
    $(this).nextAll('.showme').slideDown();   //as clickme>showme
});

ツリー トラバーサルの詳細については、jQuery API ドキュメントを参照してください。

于 2013-02-14T20:44:00.713 に答える
1

使用できます.nextAll()：

$('.clickme').click(function() {
    $(this).nextAll('.showme').slideDown();
});

デモ: http://jsfiddle.net/QespX/1/

これが機能する唯一の理由は、.showmeが の兄弟であるためです.clickme。クリックした要素の後のすべての要素.nextAll()を選択しますが、1 つしかないため、機能します。.showMe

それが問題である場合は.first()、結果を絞り込むために使用できます。

$(this).nextAll('.showme').first().slideDown();
于 2013-02-14T20:41:09.500 に答える