jquery遍历元素

jQuery遍历元素方法

jQuery提供了多种方法来遍历DOM元素，以下是常用的几种方式：

each()方法 使用each()可以遍历匹配的元素集合，对每个元素执行回调函数。回调函数的参数为索引和当前元素。

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

find()方法 在当前元素集合的后代中查找匹配选择器的元素。

$('#container').find('p').css('color', 'red');

children()方法 获取当前元素集合的直接子元素，可选择性地用选择器过滤。

$('ul').children('li').addClass('highlight');

parent()和parents()方法 parent()获取当前元素的直接父元素，parents()获取所有祖先元素。

$('li').parent().css('border', '1px solid black');

siblings()方法 获取当前元素的所有兄弟元素，可选择性地用选择器过滤。

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

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

$('.active').next().addClass('next-active');

filter()方法 从当前元素集合中筛选出匹配选择器或通过函数测试的元素。

$('div').filter('.important').css('font-weight', 'bold');

map()方法 将当前元素集合转换为新数组，每个元素通过回调函数处理。

var texts = $('p').map(function() {
  return $(this).text();
}).get();

遍历方法的选择

• 需要遍历所有匹配元素并执行操作时使用each()
• 查找后代元素使用find()
• 操作直接子元素使用children()
• 查找祖先元素使用parent()或parents()
• 操作兄弟元素使用siblings(), next()或prev()
• 筛选元素集合使用filter()
• 转换元素集合为数组使用map()

这些方法可以链式调用，组合使用能实现复杂的DOM遍历和操作。