jQuery的.children()
选择器用于获取匹配元素集合中每个元素的直接子元素(仅一级子元素)。它是jQuery DOM遍历方法中的重要组成部分。
$(selector).children([filter])
selector
: 要查找子元素的jQuery对象filter
(可选): 用于筛选子元素的选择器表达式.children()
只查找直接子元素(一层深度),而.find()
会查找所有后代元素(任意深度)。
.find()
,.children()
只查找一层DOM,性能更好// 获取ul的所有直接子元素(li)
$('ul').children();
// 获取ul的直接子元素中class为active的元素
$('ul').children('.active');
// 先选择第一层div,再选择其子元素中的p标签
$('#container').children('div').children('p');
// 获取子元素并添加class
$('#parent').children().addClass('child-element');
原因:
解决方案:
// 确保DOM加载完成
$(document).ready(function() {
// 使用正确的选择器
$('#parent').children('.child-class');
});
// 或者如果需要选择所有后代,改用.find()
$('#parent').find('.child-class');
原因:
解决方案:
// 获取所有子节点(包括文本节点)
$('#parent').contents();
原因:
解决方案:
// 缓存jQuery对象
var $parent = $('#parent');
var $children = $parent.children();
// 然后操作缓存的$children
<ul id="menu">
<li>首页</li>
<li class="active">产品
<ul>
<li>产品1</li>
<li>产品2</li>
</ul>
</li>
<li>关于我们</li>
</ul>
// 获取#menu的直接子li元素(3个)
$('#menu').children('li');
// 不会获取嵌套ul中的li,因为不是直接子元素
// 高亮所有直接子li
$('#menu').children('li').css('background-color', 'yellow');
// 只高亮active的子元素
$('#menu').children('.active').css('font-weight', 'bold');
jQuery的.children()选择器是精确选择直接子元素的强大工具,在需要操作特定层级DOM元素时非常有用。理解它与.find()的区别,合理使用过滤参数,可以编写出更高效、更精确的jQuery代码。