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 对象。