jquery遍历集合

jQuery 遍历集合的方法

jQuery 提供了多种方法来遍历集合（如 DOM 元素集合或数组）。以下是常见的遍历方法：

each() 方法
each() 是 jQuery 中最常用的遍历方法，用于迭代一个 jQuery 对象集合，并对每个元素执行回调函数。

语法：

$(selector).each(function(index, element) {
    // 处理逻辑
});

示例：

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

map() 方法
map() 方法用于遍历集合，并通过回调函数返回一个新的 jQuery 对象或数组。

语法：

$(selector).map(function(index, element) {
    // 返回处理后的值
});

示例：

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

filter() 方法
filter() 方法用于筛选集合中符合条件的元素，返回一个新的 jQuery 对象。

语法：

$(selector).filter(criteria);

示例：

$('li').filter(function() {
    return $(this).text().includes('example');
}).css('color', 'red');

find() 方法
find() 方法用于在集合的子元素中查找匹配的元素。

语法：

$(selector).find(childSelector);

示例：

$('ul').find('li').css('font-weight', 'bold');

children() 方法
children() 方法用于获取集合中每个元素的直接子元素。

语法：

$(selector).children(childSelector);

示例：

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

其他遍历方法

• parent()：获取每个元素的直接父元素。
• parents()：获取所有祖先元素。
• siblings()：获取所有兄弟元素。
• next() 和 prev()：获取下一个或上一个兄弟元素。

示例：

$('li').parent().css('border', '1px solid black');
$('li').siblings().addClass('sibling-item');

这些方法可以灵活组合使用，以满足不同的遍历需求。