jquery循环遍历

jQuery 循环遍历方法

jQuery 提供了多种方法用于循环遍历 DOM 元素或数组对象。以下是常见的几种方式：

each() 方法

each() 是 jQuery 中最常用的遍历方法，可以对 DOM 元素集合或数组进行迭代。

// 遍历 DOM 元素
$('li').each(function(index, element) {
  console.log(index, $(element).text());
});

// 遍历数组或对象
$.each([1, 2, 3], function(index, value) {
  console.log(index, value);
});

map() 方法

map() 方法会创建一个新数组，包含对每个元素调用函数后的返回值。

var newArray = $('li').map(function(index, element) {
  return $(element).text();
}).get();
console.log(newArray);

for 循环

虽然 jQuery 提供了自己的遍历方法，但也可以使用原生 JavaScript 的 for 循环。

var lis = $('li');
for (var i = 0; i < lis.length; i++) {
  console.log(i, $(lis[i]).text());
}

grep() 方法

grep() 方法用于过滤数组，返回符合条件的新数组。

var filtered = $.grep([1, 2, 3, 4], function(value, index) {
  return value > 2;
});
console.log(filtered); // [3, 4]

注意事项

• 使用 each() 时，回调函数中的 this 指向当前迭代的 DOM 元素
• map() 返回的是 jQuery 对象，需要使用 .get() 转换为原生数组
• $.each() 可以遍历数组和对象，而 $().each() 只能遍历 jQuery 对象