jquery的循环
jQuery 循环方法
jQuery 提供了多种循环方法,适用于不同的场景。以下是几种常用的循环方式:
.each() 方法
.each() 是 jQuery 中最常用的循环方法,用于遍历 jQuery 对象中的元素或数组/对象。
语法:
$(selector).each(function(index, element) {
// 循环体
});
示例:
$('li').each(function(index, element) {
console.log(index + ': ' + $(element).text());
});
$.each() 方法
$.each() 是一个通用的遍历方法,可以遍历数组或对象。
语法:
$.each(collection, function(index, value) {
// 循环体
});
示例:
var arr = ['a', 'b', 'c'];
$.each(arr, function(index, value) {
console.log(index + ': ' + value);
});
.map() 方法
.map() 方法通过函数处理每个元素,并返回一个新的 jQuery 对象。
语法:
$(selector).map(function(index, element) {
// 处理逻辑
return value;
});
示例:
var texts = $('li').map(function(index, element) {
return $(element).text();
}).get();
console.log(texts);
for 循环
虽然 jQuery 提供了自己的循环方法,但标准的 JavaScript for 循环也可以用于遍历 jQuery 对象。
示例:
var $items = $('li');
for (var i = 0; i < $items.length; i++) {
console.log($items.eq(i).text());
}
.filter() 方法
.filter() 方法用于筛选匹配的元素集合。
语法:
$(selector).filter(function(index) {
// 筛选条件
return condition;
});
示例:

$('li').filter(function(index) {
return index % 2 === 0;
}).css('color', 'red');
注意事项
- 在循环中,
this关键字通常指向当前迭代的元素。 - 使用
return false可以提前退出.each()循环。 - 对于大型数据集,原生 JavaScript 循环(如
for)可能比 jQuery 方法性能更高。
这些方法提供了灵活的循环方式,可以根据具体需求选择最适合的一种。






