当前位置：首页 > jquery

jquery获取子元素

2026-04-08 03:42:45jquery

获取子元素的方法

使用jQuery获取子元素可以通过多种选择器和方法实现，以下是几种常见的方式：

使用`children()`方法

children()方法用于获取匹配元素的直接子元素，可以传入选择器进行过滤：

jquery获取子元素

// 获取所有直接子元素
$('#parent').children();

// 获取特定类名的直接子元素
$('#parent').children('.child-class');

使用`find()`方法

find()方法可以获取匹配元素的所有后代元素（包括子元素、孙元素等）：

jquery获取子元素

// 获取所有后代元素
$('#parent').find('*');

// 获取特定标签的后代元素
$('#parent').find('div');

使用CSS选择器

直接通过jQuery选择器组合定位子元素：

// 获取直接子元素
$('#parent > .child-class');

// 获取所有后代元素
$('#parent .child-class');

使用`filter()`方法

对已选择的元素集合进一步过滤：

// 获取符合条件的子元素
$('#parent').children().filter(':even');

注意事项

children()仅查找直接子元素，而find()会遍历所有层级。
选择器>表示直接子元素关系（如parent > child）。
性能上，children()通常比find()更快，因搜索范围更小。

示例代码

<div id="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="grandparent">
    <div class="grandchild">Grandchild</div>
  </div>
</div>

<script>
  // 获取直接子元素
  const directChildren = $('#parent').children('.child');
  console.log(directChildren.length); // 输出2

  // 获取所有后代元素
  const allDescendants = $('#parent').find('.grandchild');
  console.log(allDescendants.text()); // 输出"Grandchild"
</script>