web-dev-qa-db-ja.com

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でのみアニメーションを実行しようとしています。クラス"archive-meta-slide"を使用してすべてのdivをアニメーション化しています。thisを使用して現在のdiv.archive-meta-slideのみをアニメーション化するのに苦労しています

div.archive-meta-slideが$metaButtonの親div内にある場合は簡単ですが、この親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");
});

誰か助けてもらえますか？

ありがとうジョシュ

javascriptjquerytraversal
20
Joshc
_$(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を参照してください。

38
lonesomeday

$(this).closest(".module")を使用して、クリックが発生した親モジュールを見つけます。

また、アニメーションを実行した後、補完関数を使用してテキストを変更することもできます。

.closest()の良い点は、適切なクラスのオブジェクトが見つかるまで、必要なだけ親チェーンを検索することです。これは、他の誰かがHTMLデザインを少し変更した場合（別のdivやスパンなどを親チェーンに追加する場合）、特定の数の.parent()参照を使用する場合よりもはるかに脆弱ではありません。

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

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

DRYそれを少し上げて、共通の関数を作ることもできます：

function metaToggleCommon(obj, height, text) {
    var $slide = $(obj).closest(".module").find(".archive-meta-slide");
    $slide.animate({ height: height}, 300, function() {
        $slide.html(text);
    });
}

var $metaButton = $("span.archive-meta");
$metaButton.toggle(
    function() {metaToggleCommon(this, "0", "close")}, 
    function() {metaToggleCommon(this, "43px", "open")}
);
10
jfriend00

あなたが探しています…

$(this).parent().next('.archive-meta-slide')

#moduleの構造が変更された場合、これはより堅牢になる可能性があります。

$(this).closest('#module').children('.archive-meta-slide')
3
s4y

使用する

jQuery(this).closest('.prev-class-name').find('.classname').first()
2
rakesh

使用する

$(this).parent().parent().children('.archive-meta-slide')

これはトップモジュールdivの子を検索するのと同じです

$（this）.parent（）。parent（）

あなたのトップになります

<div class="module">
1
Markandey Singh

指定したセレクターで親に到達するまで戻ることができる closest を試してください。

$(this).closest(".module")
0
lxalln