jquery 子节点

jQuery 获取子节点的方法

使用 children() 方法可以获取匹配元素的所有直接子元素。该方法返回一个包含所有子元素的 jQuery 对象。

$('#parent').children();

通过传递选择器参数，可以筛选特定的子元素。例如，只获取类名为 child 的子元素：

$('#parent').children('.child');

jQuery 查找所有后代节点

find() 方法用于查找匹配元素的所有后代元素，包括子元素、孙元素等。该方法返回一个包含所有匹配后代元素的 jQuery 对象。

$('#parent').find('*');

通过传递选择器参数，可以筛选特定的后代元素。例如，查找所有 <div> 后代元素：

$('#parent').find('div');

jQuery 筛选特定子节点

结合 filter() 方法可以对子元素进行更复杂的筛选。例如，筛选出具有 data-role 属性的子元素：

$('#parent').children().filter('[data-role]');

jQuery 遍历子节点

使用 each() 方法可以遍历所有子元素并对每个元素执行操作。例如，为每个子元素添加类名：

$('#parent').children().each(function() {
  $(this).addClass('processed');
});

jQuery 子节点操作示例

动态添加子节点可以使用 append() 或 appendTo() 方法：

$('#parent').append('<div class="new-child">New Child</div>');

删除所有子节点可以使用 empty() 方法：

$('#parent').empty();

删除特定子节点可以使用 remove() 方法：

$('#parent').children('.to-remove').remove();