当前位置：首页 > jquery

jquery获取子元素

2026-03-02 18:36:11jquery

获取子元素的方法

在jQuery中，可以通过多种方式获取元素的子元素。以下是几种常用的方法：

使用children()方法 children()方法返回被选元素的所有直接子元素。语法如下：

$(selector).children(filter)

filter参数可选，用于筛选子元素。例如：

$("#parent").children(); // 获取所有子元素
$("#parent").children(".child-class"); // 获取特定class的子元素

使用find()方法 find()方法返回被选元素的后代元素（包括子元素、孙元素等）。语法如下：

$(selector).find(filter)

例如：

$("#parent").find("div"); // 获取所有div后代元素
$("#parent").find(".child"); // 获取class为child的后代元素

使用>选择器 可以直接在jQuery选择器中使用CSS子元素选择器>：

$("#parent > .child"); // 获取直接子元素中class为child的元素

区别说明

children()仅查找直接子元素
find()查找所有后代元素
选择器在性能上通常优于find()

遍历子元素

获取子元素后，可以使用each()方法进行遍历：

$("#parent").children().each(function(index, element) {
    // index是索引，element是DOM元素
    console.log($(element).text());
});

筛选特定子元素

可以通过多种方式筛选特定子元素：

$("#parent").children(":first"); // 第一个子元素
$("#parent").children(":last"); // 最后一个子元素
$("#parent").children(":even"); // 偶数索引子元素
$("#parent").children(":odd"); // 奇数索引子元素
$("#parent").children(":eq(2)"); // 第三个子元素（索引从0开始）