☰

jQuery はこの要素の親兄弟のみを取得します 質問する

tag-icon • tag-icon javascript jquery traversal
jQuery はこの要素の親兄弟のみを取得します 質問する

これをどう書けばいいのか分かりません。

ページ上で複数回繰り返される私のマークアップ構造を参照してください。

<div class="module">    
    <div class="archive-info">
        <span class="archive-meta">
            open
        </span>                         
    </div>
    <div class="archive-meta-slide">
    </div>                              
</div>

<span>私のマークアップの中にあるのを見ると、$metaButtonこれがクリックされるとアニメーションが実行されます。div.archive-meta-slideこれは十分シンプルですが、現在の のみでアニメーションを実行しようとしています。div.moduleこれはクラスを持つすべてのdivをアニメーション化しますが、現在の のみを使用して"archive-meta-slide"アニメーション化するのは本当に大変です。div.archive-meta-slidethis

div.archive-meta-slideが の親 div の内側にあったら簡単です$metaButtonが、この親 div の外側にあるため、正しくトラバースできません。

私のスクリプトを見る

var $metaButton = $("span.archive-meta"),
    $metaSlide = $(".archive-meta-slide");

$metaButton.toggle(
function() {
    $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "0" }, 300);
    $(this).parent().siblings().find(".archive-meta-slide").html("close");
},
function() {
    $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "43px" }, 300);
    $(this).parent().siblings().find(".archive-meta-slide").html("open");
});

誰か助けてくれませんか？

ありがとう、ジョシュ

ベストアンサー1

$(this).parent().siblings().find(".archive-meta-slide")

これは本当にこれは実際には「この要素の親の兄弟の子孫であるクラスの要素を検索するarchive-meta-slide」という意味です。つまり「この要素の親の兄弟の子孫であるクラスの要素を検索する」という意味ですarchive-meta-slide。は「この要素の親の兄弟」。そのためには、呼び出し時にセレクタを使用しますsiblings。

$(this).parent().siblings(".archive-meta-slide")

マークアップが常にこの構造である場合は、 を実行することもできることに注意してください$(this).parent().next()。

jQuery API を参照してください:

おすすめ記事