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元素，根据具体需求选择合适的方法组合可以提高代码效率和可读性。