javascript - jquery.find() 可以只选择直接 child 吗？

Question

我应该向 jQuery.find() 提供什么参数来选择子元素而不是其他元素？我不能用 '>' 引导选择器，而具有 '*' 将选择所有后代，而不仅仅是直接子代。

我知道 jQuery.children()，但这是一个库，因此用户可以提供他们自己的选择器，我想确保他们有一些方法来选择直接子级(不添加很多我自己的逻辑)。

编辑

我想使用 jQuery.find() 只在父元素的第一级子元素中查找元素，而不是子元素的子元素。

例子:

<parent>
  <child-1>
    <child-2></child-2>
  </child-1>
  <child-1>
  </child-1>
</parent>

我只想搜索元素 child-1 而不是他们的 child (即 child-2)

*编辑:**

有关更多说明，它是一个用于表格元素的 Angular 指令。该指令需要能够找到表行，但旨在用于各种模板，因此它可以有一个行选择器。有时这些行除了是原始元素的子 div 之外没有明显的特征；其他时候，这些行是孙辈甚至曾孙辈。

Answer 1

如您在问题中提到的那样，使用 > 启动您的选择器。试一试:

var s = ".classA",
    n = $('#wrapper').find('>'+s).length;

alert('Found '+ n +' direct children of #wrapper with the "'+ s +'" selector.'); // 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="wrapper">
    <div class="classA"></div>     <!-- Selected -->
    <div class="classA">           <!-- Selected -->
        <div class="classA"></div> <!-- Ignored -->
    </div>
    <div class="classC">
        <div class="classA"></div> <!-- Ignored -->
    </div>
    <div class="classB">
        <div class="classB"></div>
    </div>
    <div class="classA"></div>     <!-- Selected -->
</div>

或者使用 $.children()，正如您在问题中提到的那样:

var s = ".classA",
    n = $('#wrapper').children(s).length;

alert('Found '+ n +' direct children of #wrapper with the "'+ s +'" selector.'); // 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="wrapper">
    <div class="classA"></div>     <!-- Selected -->
    <div class="classA">           <!-- Selected -->
        <div class="classA"></div> <!-- Ignored -->
    </div>
    <div class="classC">
        <div class="classA"></div> <!-- Ignored -->
    </div>
    <div class="classB">
        <div class="classB"></div>
    </div>
    <div class="classA"></div>     <!-- Selected -->
</div>