jquery 循环
jQuery 循环方法
jQuery 提供了多种循环遍历元素或数组的方法,以下是常用的几种方式:
each() 方法
each() 是 jQuery 中最常用的循环方法,用于遍历 jQuery 对象集合或数组:
$('selector').each(function(index, element) {
// index 是当前元素的索引
// element 是当前 DOM 元素(不是 jQuery 对象)
// 使用 $(element) 转换为 jQuery 对象
});
$.each() 方法
$.each() 是一个通用的迭代器,可以遍历数组或对象:
$.each(arrayOrObject, function(indexOrKey, value) {
// 处理每个元素
});
map() 方法
map() 方法创建一个新数组,包含对原数组每个元素调用函数后的结果:
var newArray = $('selector').map(function(index, element) {
return $(element).text(); // 返回处理后的值
}).get(); // .get() 将 jQuery 对象转为普通数组
for 循环
虽然 jQuery 提供了自己的循环方法,但也可以使用原生 JavaScript 的 for 循环:
var elements = $('selector');
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
// 处理每个元素
}
遍历对象属性
使用 $.each() 遍历对象的属性:
var obj = { name: 'John', age: 30 };
$.each(obj, function(key, value) {
console.log(key + ': ' + value);
});
终止循环
在 each() 循环中,可以通过返回 false 来终止循环:
$('selector').each(function(index) {
if (index === 2) return false; // 终止循环
});
跳过当前迭代
在 each() 循环中,可以通过返回 true 来跳过当前迭代:
$('selector').each(function(index) {
if (index === 2) return true; // 跳过当前迭代
});
性能考虑
对于大型集合,原生 JavaScript 循环(如 for 循环)通常比 jQuery 的 each() 更快。但在大多数情况下,each() 提供了更简洁的语法和更好的可读性。
示例:修改多个元素的样式
$('.item').each(function() {
$(this).css('color', 'red');
});
示例:遍历数组
var numbers = [1, 2, 3];
$.each(numbers, function(index, value) {
console.log(index + ': ' + value);
});






