如何通过jQuery函数仅获取直接子元素

Posted 2023-02-19

【中文标题】如何通过jQuery函数仅获取直接子元素

【英文标题】：How to get only direct child elements by jQuery function

【发布时间】：2011-04-10 21:35:57

【问题描述】：

我有一个这样的表结构：

<table1>
  <tbody>
    <tr>
      <td></td>
        ...
      <td>
        <table2>
          <tbody>
            <tr>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
   </tbody>
  </table>

在javascript中，我有一个变量tbl，其值为$(table1)，然后我想获取<tbody> 的table1 的所有直接子元素（tr）。 我的代码是：

$('tr', tb1)

显然它会返回 table1 和 table2 中的所有 <tr> 元素。 我觉得我能过

$('tr', tb1).not(function()return $(this).parent().parent()[0] != tb1;)

还是这样的逻辑。

我知道$('table1 > tbody > tr') 可以得到直子tr。可惜我不能用这个。

有人对此有好的想法吗？

谢谢。

【参考方案1】：

你可以使用find():

tbl.find("> tbody > tr")

【讨论】：

这是一个绝妙的主意。 $('> tbody > tr', tb1) 也适用于我。谢谢。

这太棒了，我不知道您可以使用直接子选择器 (>) 而无需在其前面指定任何内容。谢谢。

请注意，对于仅向下一级的直接子级，您可以简单地使用 'children([selector])'。

DIRECT CHILDREN = 下一级的孩子，因此 api.jquery.com/children 是正确的答案，而不是 find() - 得到所有后代元素（由选择器过滤）...

您应该将您的评论作为单独的答案 jave.web，因为您的答案是正确的。

【参考方案2】：

正如 cmets 中提到的 @jave.web

要搜索元素的直接子元素，请使用.children()。它只会搜索直接子代，不会更深入地遍历。 http://api.jquery.com/children/

【参考方案3】：

这正是人们应该小心嵌套表格的原因。我真的希望您将它们用于数据而不是页面布局。

另一个可能会毁掉你一天的问题是在嵌套表上使用 CSS 选择器......你基本上有同样的问题 - 你无法选择外部表的 TR 元素而不选择内部表中的那些元素。 （您不能使用子选择器，因为它没有在 IE6 中实现）

这应该可行：

$("#table1 > tbody > tr")

但是，我建议您对 TBODY 元素进行硬编码，因为您不应依赖浏览器为您创建它。

【参考方案4】：

http://api.jquery.com/child-selector/

$('tb1 > tr')

【讨论】：

这只有在tb1是一个html标签时才有效，但它不是；如果tr 是它的直接子代（不是，它是<tbody> 的直接子代）。

【参考方案5】：

如果你有两个元素的 id 并且你想找到直接元素使用下面的代码

$("#parent > #two")

如果您想要嵌套搜索，您可以使用 find。 这里有详细解释。 https://handyopinion.com/jquery-selector-find-nested-child-elements/