從父母到孩子沒有遍歷完整路徑

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'); 

這會給你的'.child-child-child'那就是.child1後裔。

或者你可以把它寫這樣的，使用only selectors：

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

還是這個，只用traversal methods：

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

Answer 2

爲了簡化這個，你可以使用選擇：

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

這個選擇說「一類的.child-child-child這是一個元素中有一類.child1一個元素裏面是用一個id元素top「。

Answer 3

您可以只使用一個descendant selector（空格）找到孩子（如.find()所示），如下所示：

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

或者，更具體一些：

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