从父母到孩子没有遍历完整路径

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