jquery遍历集合
jQuery 遍历集合的方法
jQuery 提供了多种方法用于遍历集合（如 DOM 元素集合或数组）。以下是常见的遍历方式：
each() 方法
each() 是 jQuery 中最常用的遍历方法，可以对集合中的每个元素执行回调函数。回调函数的参数为索引和当前元素。
$('div').each(function(index, element) {
console.log(index, $(element).text());
});map() 方法
map() 方法遍历集合，并通过回调函数返回的值生成一个新的 jQuery 对象或数组。
const texts = $('div').map(function(index, element) {
return $(element).text();
}).get();
console.log(texts);filter() 方法
filter() 方法用于筛选集合中符合条件的元素，返回一个新的 jQuery 对象。
$('div').filter('.active').css('color', 'red');find() 方法
find() 方法用于在当前集合的子元素中查找匹配选择器的元素。
$('div').find('span').css('color', 'blue');children() 方法
children() 方法返回当前集合中所有直接子元素，可以选择性地传入选择器进行筛选。
$('div').children('p').css('font-weight', 'bold');parent() 和 parents() 方法
parent() 方法返回当前集合中每个元素的直接父元素，parents() 返回所有祖先元素。
$('span').parent().css('background', 'yellow');
$('span').parents('div').css('border', '1px solid black');siblings() 方法
siblings() 方法返回当前集合中所有兄弟元素。
$('li.active').siblings().css('color', 'gray');next() 和 prev() 方法
next() 返回当前元素的下一个兄弟元素，prev() 返回前一个兄弟元素。
$('li.active').next().css('color', 'green');
$('li.active').prev().css('color', 'red');first() 和 last() 方法
first() 返回集合中的第一个元素，last() 返回最后一个元素。
$('div').first().css('font-size', '20px');
$('div').last().css('font-size', '10px');eq() 方法
eq() 方法返回集合中指定索引位置的元素。
$('div').eq(2).css('background', 'lightgray');注意事项
- jQuery 的遍历方法通常返回一个新的 jQuery 对象，支持链式调用。
- 使用
get()方法可以将 jQuery 对象转换为原生数组。 - 回调函数中的
this指向当前 DOM 元素，可以使用$(this)转换为 jQuery 对象。
