jquery遍历集合

jQuery 遍历集合方法

each() 方法
each() 是最常用的遍历方法，支持对数组、对象或 jQuery 集合进行迭代。回调函数参数为索引和当前元素。

$('div').each(function(index, element) {
  console.log(index, $(element).text());
});

map() 方法
map() 会返回一个新数组，通过回调函数处理每个元素的值。

const texts = $('div').map(function() {
  return $(this).text();
}).get();
console.log(texts);

find() 方法
在集合的子元素中查找匹配选择器的元素，返回新的 jQuery 对象。

$('ul').find('li').css('color', 'red');

filter() 方法
筛选集合中符合选择器或函数条件的元素。

$('div').filter('.active').addClass('highlight');

children() 与 parent()
children() 获取直接子元素，parent() 获取直接父元素。

$('ul').children('li').first().css('font-weight', 'bold');
$('li').parent().addClass('has-items');

siblings() 方法
获取同层级的所有兄弟元素，可传入选择器进一步过滤。

$('.target').siblings().hide();

next() 与 prev()
next() 获取下一个兄弟元素，prev() 获取上一个兄弟元素。

$('.current').next().addClass('selected');

注意事项

• 遍历 DOM 时优先使用 jQuery 方法而非原生循环，避免兼容性问题。
• 链式调用时注意返回的集合可能变化，例如 find() 后会生成新集合。
• 性能敏感场景可缓存 jQuery 对象（如 const $items = $('.item')）。