jquery循环
jQuery 循环方法
jQuery 提供了多种循环方法,适用于不同的场景,包括遍历 DOM 元素、数组或对象。以下是常见的 jQuery 循环方式:
each() 方法
each() 是 jQuery 中最常用的循环方法,可用于遍历 jQuery 对象或普通数组/对象。
遍历 jQuery 对象:
$('div').each(function(index, element) {
console.log(index, $(element).text());
});
遍历数组:

$.each([1, 2, 3], function(index, value) {
console.log(index, value);
});
遍历对象:
$.each({name: 'John', age: 30}, function(key, value) {
console.log(key, value);
});
for 循环
虽然 jQuery 提供了专门的循环方法,但传统的 JavaScript for 循环也可以配合 jQuery 使用:

var items = $('.item');
for (var i = 0; i < items.length; i++) {
console.log($(items[i]).text());
}
map() 方法
map() 方法会创建一个新数组,包含对每个元素应用函数后的结果:
var texts = $('div').map(function(index, element) {
return $(element).text();
}).get();
console.log(texts);
循环控制
在 jQuery 循环中可以使用 return false 来中断循环(相当于 break),或 return true 跳过当前迭代(相当于 continue):
$('div').each(function() {
if ($(this).hasClass('stop')) {
return false; // 中断循环
}
if ($(this).hasClass('skip')) {
return true; // 跳过当前迭代
}
console.log($(this).text());
});
性能优化建议
对于大型 DOM 集合,缓存 jQuery 对象可以提高性能:
var $divs = $('div'); // 缓存选择器结果
$divs.each(function() {
// 操作
});
在现代浏览器中,原生 JavaScript 方法如 forEach 可能比 jQuery 的 each() 更快,但 jQuery 方法提供了更好的跨浏览器兼容性。






