web-dev-qa-db-ja.com

jQuery：this：「$（this）.next（）。next（）」は機能しますが、「$（this）.next（ '。div'）」は機能しません

さて、私はこの情報セットを取得して個別に非表示にしようとしています。

<img class="arrow" src="images/navigation/arrowright.png">
<H2>More Information</H2>
<div class="box">
    <h2>Bibendum Magna Lorem</h2>
    <p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>

<img class="arrow" src="images/navigation/arrowright.png">
<H2>A Second Group of Information</H2>
<div class="box">
    <h2>Bibendum Magna Lorem</h2>
    <p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>

これを入力すると動作します：

$(".arrow").click(function() {
    $(this).next().next().slideToggle();
});

しかし、私がこれを行うときではありません：

$(".arrow").click(function() {
    $(this).next('.box').slideToggle();
});

2番目のオプションが機能しない原因は何ですか？私は何日もそこにいましたが、それを理解することはできません！ご意見ありがとうございます！

javascriptjquerythisnext
17
fjaxyu

問題

.next(selector)の-​​ documentation を見ると、セレクタに一致する次の兄弟を「検出」しません。むしろ、次の兄弟だけを見て、あなたが望むものではないセレクターと一致する場合にのみその要素を返します。

.next()のドキュメントの内容は次のとおりです。

説明：一致した要素のセット内の各要素の兄弟をすぐに取得します。セレクターが提供されている場合、そのセレクターと一致する場合にのみ次の兄弟を取得します。

したがって、.next(".box")はh2要素の直後の.arrow要素（次の兄弟要素）を見て、それを.boxセレクターと比較します。空のjQueryオブジェクトを返します。

。nextAll（）を使用したソリューション

セレクタに一致する次の兄弟が必要な場合は、これを使用できます。

$(this).nextAll(".box").eq(0).slideToggle();

これにより、セレクタに一致するすべての兄弟が検索され、最初の兄弟のみが抽出されます。

独自の.findNext（）メソッドを作成

私はjQueryにこのためのメソッドがない理由をよく考えて、自分で1つ作成しました。

// get the next sibling that matches the selector
// only processes the first item in the passed in jQuery object
// designed to return a jQuery object containing 0 or 1 DOM elements
jQuery.fn.findNext = function(selector) {
    return this.eq(0).nextAll(selector).eq(0);
}

そして、あなたはただ使用するでしょう：

$(this).findNext(".box").slideToggle();

オプション：HTMLに構造を追加して、物事をより簡単で柔軟にする

参考までに、このような問題に対する一般的なアプローチは、次のようなDOM要素の各セットの周りにdivを含むことです。

<div class="container">
    <img class="arrow" src="images/navigation/arrowright.png">
    <H2>More Information</H2>
    <div class="box">
            <h2>Bibendum Magna Lorem</h2>
            <p>Cras mattis consectetur purus sit amet fermentum.</p>
    </div>
</div>

<div class="container">
     <img class="arrow" src="images/navigation/arrowright.png">
     <H2>A Second Group of Information</H2>
     <div class="box">
            <h2>Bibendum Magna Lorem</h2>
            <p>Cras mattis consectetur purus sit amet fermentum.</p>
     </div>    
</div>

次に、要素の正確な配置に対する感度がやや低いコードを使用できます。

$(".arrow").click(function() {
    $(this).closest(".container").find(".box").slideToggle();
});

これは、.closest()を使用して包含および共通の親に移動し、.find()を使用してそのグループ内の.box要素を見つけます。

44
jfriend00