jquery便利

jQuery 遍历方法

jQuery 提供了多种遍历 DOM 元素的方法，可以根据需求选择合适的方式操作元素集合。

each() 方法

each() 方法用于迭代 jQuery 对象中的每个元素，并为每个元素执行回调函数。回调函数接收两个参数：当前元素的索引和元素本身。

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

map() 方法

map() 方法通过处理每个元素生成一个新的 jQuery 对象。回调函数可以返回新的值，这些值会被收集到一个数组中。

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

find() 方法

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

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

children() 方法

children() 方法获取当前元素的直接子元素，可以传入选择器进行过滤。

$('ul').children('li').css('background', 'yellow');

parent() 和 parents() 方法

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

$('li').parent().css('border', '1px solid black');
$('li').parents('div').addClass('highlight');

siblings() 方法

siblings() 方法获取当前元素的所有兄弟元素，可以传入选择器进行过滤。

$('li.active').siblings().css('opacity', '0.5');

filter() 方法

filter() 方法从当前元素集合中筛选出符合选择器或回调函数条件的元素。

$('li').filter(':even').css('font-weight', 'bold');

not() 方法

not() 方法从当前元素集合中排除符合选择器或回调函数条件的元素。

$('li').not('.active').css('text-decoration', 'line-through');

eq() 方法

eq() 方法从当前元素集合中获取指定索引位置的元素。

$('li').eq(2).css('color', 'blue');

first() 和 last() 方法

first() 方法获取当前元素集合中的第一个元素，last() 方法获取最后一个元素。

$('li').first().css('font-size', '20px');
$('li').last().css('font-style', 'italic');

遍历链式操作

jQuery 方法通常返回 jQuery 对象，因此可以链式调用多个遍历方法。

$('ul')
  .find('li')
  .filter(':odd')
  .css('background', 'lightgray')
  .end()
  .filter(':even')
  .css('background', 'lightblue');

注意事项

• 使用 each() 时，回调函数中的 this 指向当前 DOM 元素，通常需要用 $(this) 转换为 jQuery 对象。
• map() 方法返回的是 jQuery 对象数组，需要使用 .get() 转换为普通数组。
• 链式操作中，end() 方法可以返回到上一个 jQuery 对象的状态。

这些方法提供了灵活的方式来遍历和操作 DOM 元素，根据具体需求选择合适的方法组合。