Question

<div id="owner">
  <!-- ...other parent elements -->
    <div class="parent one">                <!-- parent lvl 1 -->
      <div class="child one">               <!-- child lvl 1 -->
        <!-- ...other parent elements -->
          <div class="parent two">            <!-- parent lvl 2 -->
            <div class="child two"></div>     <!-- child lvl 2 -->
            <div class="child two"></div>
            <div class="child two"></div>
          </div>
      </div>
      <div class="child one"></div> 
      <div class="child one"></div> 
      <div class="child one"></div> 
    </div>
</div>

var el = document.getElementById("owner");
el && el.querySelectorAll('.parent .child');

重要提示：班级名称＆＃34;一个＆＃34;和＆＃34;两个＆＃34;仅用于视觉目的 - 它不存在。

结果我们将获得7次div.child节点。如何创建只选择来自＆＃34; first lvl＆＃34; （我们最终得到4 x div.child.one）。

重要说明：这是一个简单的例子，但实际上我们不知道div＃owner中div.parent.one有多深，这同样适用于div.parent.two

也许有可能用 ExtJS ？

var el = Ext.get('#owner');
el.down('.parent .child');     //does not work, returns all elements as above

JSFiddle

Answer 1

您可以使用：

#owner > .parent  > .child

使用>，您可以指定父元素中的直接子元素。

Answer 2

试试这个。你使用outerdiv名称也改为外部div名称

＆＃13;

var el = document.getElementById("owner");

parent = document.querySelector('.parents');
children = parent.children;
console.info(children);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="owner">
  <div class="parents one">                <!-- parent lvl 1 -->
    <div class="child one">               <!-- child lvl 1 -->
      <div class="parent two">            <!-- parent lvl 2 -->
        <div class="child two"></div>     <!-- child lvl 2 -->
        <div class="child two"></div>
        <div class="child two"></div>
      </div>
    </div>
    <div class="child one"></div> 
    <div class="child one"></div> 
    <div class="child one"></div> 
  </div>
</div>

＆＃13;

是否有第一级嵌套元素的CSS选择器而不会更深入？

2 个答案: