jquery遍历元素

jQuery 遍历元素的方法

jQuery 提供了多种方法来遍历 DOM 元素，以下是常用的几种方式：

each() 方法

each() 方法用于遍历 jQuery 对象中的每个元素，并对每个元素执行回调函数。回调函数接受两个参数：索引和当前元素。

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

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').css('background', 'lightgray');

siblings() 方法

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

$('li.active').siblings().css('color', 'blue');

next() 和 prev() 方法

next() 方法获取当前元素的下一个兄弟元素，prev() 方法获取上一个兄弟元素。

$('li.active').next().css('font-weight', 'bold');
$('li.active').prev().css('text-decoration', 'underline');

filter() 方法

filter() 方法用于从匹配的元素集合中筛选出符合条件的元素。

$('li').filter('.active').css('color', 'green');

map() 方法

map() 方法用于将匹配的元素集合转换为一个新的数组或 jQuery 对象。

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

closest() 方法

closest() 方法用于获取匹配选择器的最近的祖先元素，包括当前元素本身。

$('li').closest('ul').css('border', '2px dashed red');

add() 方法

add() 方法用于将元素添加到当前匹配的元素集合中。

$('li').add('p').css('color', 'purple');

这些方法可以根据具体需求组合使用，灵活地遍历和操作 DOM 元素。