jquery遍历
jQuery遍历方法
jQuery提供了多种遍历DOM元素的方法,可以根据需求选择合适的方式操作元素集合。
each()方法
each()方法用于遍历jQuery对象中的每个元素,并对每个元素执行回调函数。回调函数接收两个参数:索引和当前DOM元素。
$('li').each(function(index, element) {
console.log(index + ': ' + $(element).text());
});
find()方法
find()方法在当前匹配元素集合的后代中查找符合选择器的元素。它会沿着DOM树向下搜索。
$('ul').find('li').css('color', 'red');
children()方法
children()方法只获取匹配元素的直接子元素,可以传入选择器进行过滤。
$('div').children('p').addClass('highlight');
parent()和parents()方法
parent()获取每个匹配元素的直接父元素,parents()获取所有祖先元素。

$('span').parent().css('border', '1px solid black');
$('span').parents('div').addClass('ancestor');
siblings()方法
siblings()方法获取匹配元素的所有兄弟元素,不包括自己。
$('li.active').siblings().removeClass('highlight');
next()和prev()方法
next()获取匹配元素集合中每个元素的下一个兄弟元素,prev()获取前一个兄弟元素。
$('li.active').next().addClass('next-item');
$('li.active').prev().addClass('prev-item');
filter()方法
filter()方法从匹配元素集合中筛选出符合选择器或通过函数测试的元素。

$('div').filter('.special').hide();
$('div').filter(function(index) {
return $(this).hasClass('special');
});
not()方法
not()方法与filter()相反,排除匹配选择器或通过函数测试的元素。
$('div').not('.special').show();
first()和last()方法
first()获取匹配元素集合中的第一个元素,last()获取最后一个元素。
$('li').first().addClass('first-item');
$('li').last().addClass('last-item');
eq()方法
eq()方法从匹配元素集合中获取指定索引位置的元素,支持负数索引。
$('li').eq(2).addClass('third-item');
$('li').eq(-1).addClass('last-item');
链式遍历
jQuery方法支持链式调用,可以组合多个遍历方法实现复杂操作。
$('ul')
.find('li')
.filter(':even')
.css('color', 'blue')
.end()
.filter(':odd')
.css('color', 'green');
这些方法提供了灵活的方式来遍历和操作DOM元素,根据具体需求选择合适的方法组合可以提高代码效率和可读性。






