jQueryはこの要素の親兄弟しか取得しません

Question

これを書く方法はわかりません。

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

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

あなたは私のマークアップ内で見ることができるように、私が持っている私の$metaButtonある<span> - これをクリックしたときに、それはdiv.archive-meta-slide上でアニメーションを実行します - これは十分に単純ですが、私がしようとしていますそれはクラス"archive-meta-slide"ですべてのdivをアニメーション化し、そして私は本当にthis

を使用して、現在div.archive-meta-slideをアニメーション化するために苦労していdiv.archive-meta-slideが$metaButtonの親divの中にあった場合、それは簡単だろう唯一の現在のdiv.module上でアニメーションを実行しますしかし、それはこの親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"); 
}); 

は誰でも助けることができるかを参照してください。

おかげ ジョシュ

Answer 1

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

これは本当に近くにあります。これは実際には「この要素の親の兄弟の子孫であるクラスarchive-meta-slideの要素を見つける」と言います。 「archive-meta-slideのクラスを持つ要素を検索すると、はこの要素の親の兄弟であるです。マークアップは、常にこのような構造であれば、あなたも$(this).parent().next()を行うことができ、という

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

注：そのために、siblingsコールのセレクターを使用しています。これは、検索子供たちと同じくらい良いです

• siblings
• find
• next

Answer 2

使用

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

：

は、jQueryのAPIを参照してください。トップモジュールのdivのエン

$（この）.parent（）。親（）

はどこから親モジュールを見つけるためにあなたのトップ

<div class="module"> 

Answer 3

使用$(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"); 
     }); 
    }, 
}); 

また少しそれを乾燥させ、共通機能を作ることができる：

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")} 
); 

Answer 4

はあなたが指定したセレクタを持つ親に到達するまで、あなたが戻って行くようになるclosestを試してみてください。あなたが#module変化の構造場合

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

...を探している、これはより堅牢であるかもしれない

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

Answer 5

：

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

Answer 6

使用

非常に

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