親から子へフルパスを辿らずに

Question

私のdivはこのように入れ子になっています。

<div id="top"> 
    <div class="child1"> 
     <div class="child-child"> 
     <div class="child-child-child"> 
     </div> 
     </div> 
    </div> 
    <div class="child2"> 
     <div class="child-child"> 
     <div class="child-child-child"> 
     </div> 
     </div> 
    </div> 
</div> 

は、今のところ私はこれを行うことによって#topから.child-child-childするつもりです。

$('#top').children('.child1') 
     .children('.child-child') 
     .children('.child-child-child'); 

このような完全なパスを指定する必要はありますか。私はそれを可能にする構文がある場合、中間のdivを省略したいと思います。しかし、おそらく私は.child1または.child2を通過するかどうかを指定する必要があります。

Answer 1

あなたが取るためにどのパスを指定する必要がありますが、あなたはそれが少し短くすることができます：

$('#top > .child1').find('.child-child-child'); 

これはあなた.child1の子孫である'.child-child-child'を与えるだろう。

$('#top').children('child1').find('.child-child-child'); 

Answer 2

これを簡素化するために、あなたは、セレクタを使用することができます。

$('#top .child1 .child-child-child'); 

このセレクタは、「言うのIDを持つ要素内だ.child1のクラスを持つ要素の内部にある.child-child-childのクラスを持つ要素top "。

Answer 3

あなただけの子供を見つけるためにdescendant selector（スペース）を使用することができます唯一のtraversal methods使用

$('#top > .child1 .child-child-child'); 

またはこの、：

それともonly selectorsを使用して、このようにそれを書くことができます（.find()のように）以下のようになります。

$('#top .child-child-child'); 

または少し具体的に：

$('#top > .child1 .child-child-child');