jQuery 在第一“级别”选择元素

Posted 2023-03-06

【中文标题】jQuery 在第一“级别”选择元素

【英文标题】：jQuery select elements on 1st "level"

【发布时间】：2010-11-09 21:23:11

【问题描述】：

我只想选择第一个“级别”上的元素。

例如：

<div id="BaseElement">
  <p>My paragraph 0</p>
  <div>
    <span>My Span 0</span>
    <span>My Span 1</span>
  </div>
  <span>MySpan 2</span>
  <span>MySpan 3</span>
  <p>My paragraph 1</p>
</div>

假设您获得了 BaseElement 节点。

var Element = $("div#BaseElement");

如何仅从基本元素节点获取节点？

$("div#BaseElement span")

应该只导致获得 MySpan 2 和 MySpan 3。

【参考方案1】：

$("#BaseElement").children("span");

或

$("#BaseElement > span");

请参阅 jQuery selectors 和 children()。

【参考方案2】：

在jQuery API中，当它指代'descendants'时，表示所有级别，而当它指代'children'时，表示只有第一级

这将使您获得所有第一级孩子（在您的示例中，第一个 p、div、2 个跨度和最后一个 p）

$('#BaseElement > *')

【参考方案3】：

另请参阅What is the difference direct descendent (>) vs. descendant in jQuery selectors? 以了解选择器中空格和 > 之间的区别。空格等于 find()，> 等于 children()。也就是说，下面的对是等价的，

$("#BaseElement").children("span");
$("#BaseElement > span");

获取所有孩子及其后代：

$("#BaseElement").find("span");
$("#BaseElement span");