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

您可以使用descendant selector（空格）查找下方的任何地方（如.find()所示），如下所示：

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

或者，更具体一点：

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

Answer 3

为简化此操作，您可以使用选择器：

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

此选择器显示“具有.child-child-child类的元素，该元素位于具有.child1类的元素内，该元素位于ID为top”的元素内。

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

3 个答案: