在前端开发中，我们经常需要获取页面中一类元素（比如所有的图片、所有的按钮、所有的列表项等），然后对它们进行批量操作。jQuery提供了非常强大的选择器和遍历方法，让这件事变得超级简单！
本文将从获取元素 到遍历操作，全面讲解各种方法和最佳实践！
📖 目录
一、获取一类元素的方法 🎯
在遍历之前，我们首先要选中这类元素。jQuery提供了多种选择器：
1️⃣ 通过类名获取 ⭐最常用
javascript
// 获取所有 class="item" 的元素
var $items = $('.item');
console.log($items.length); // 打印元素个数2️⃣ 通过标签名获取
javascript
// 获取所有 <div> 元素
var $divs = $('div');
// 获取所有 <img> 元素
var $imgs = $('img');3️⃣ 通过属性获取
javascript
// 获取所有 type="text" 的输入框
var $inputs = $('input[type="text"]');
// 获取所有 name 开头为 "user" 的元素
var $users = $('[name^="user"]');4️⃣ 组合选择器（更精确）
javascript
// 获取 .container 下的所有 .item
var $items = $('.container .item');
// 获取 ul > li（直接子元素）
var $lis = $('ul > li');
// 获取所有带有 data-id 属性的元素
var $items = $('[data-id]');5️⃣ 获取元素后存储
javascript
// ✅ 推荐：缓存jQuery对象，避免重复查询
var $buttons = $('.btn'); // 查询一次，多次使用
// ❌ 不推荐：每次都重新查询
$('.btn').css('color', 'red');
$('.btn').text('点击'); // 重复查询，性能差二、遍历元素的核心方法 🔁
获取到元素集合后，就可以开始遍历了！
1️⃣ .each() 方法 ⭐⭐⭐最常用
语法：
javascript
$('.item').each(function(index, element) {
// index: 当前索引（从0开始）
// element: 当前DOM元素（原生JS对象）
// this: 当前jQuery对象
});示例1：修改所有元素的文本
javascript
$('.item').each(function(index) {
$(this).text('第' + (index + 1) + '个元素');
});示例2：给所有图片添加点击事件
javascript
$('img').each(function() {
$(this).on('click', function() {
alert('你点击了第' + ($(this).index() + 1) + '张图片');
});
});示例3：获取所有元素的文本并存入数组
javascript
var texts = [];
$('.item').each(function() {
texts.push($(this).text());
});
console.log(texts); // ["文本1", "文本2", "文本3"]2️⃣ .map() 方法 ⭐⭐⭐返回新数组
语法：
javascript
var newArray = $('.item').map(function(index, element) {
return $(this).text(); // 返回值会组成新数组
}).get(); // .get() 转换为原生数组示例：提取所有价格
javascript
var prices = $('.price').map(function() {
return parseFloat($(this).text().replace('¥', ''));
}).get();
console.log(prices); // [19.9, 29.9, 39.9]3️⃣ .filter() 方法 ⭐⭐⭐筛选元素
语法：
javascript
var filtered = $('.item').filter(function(index) {
return $(this).text().length > 5; // 返回true的元素保留
});示例：筛选文本长度大于5的元素
javascript
var longTexts = $('.item').filter(function() {
return $(this).text().length > 5;
}).css('color', 'red');4️⃣ for 循环（原生JS）
javascript
var $items = $('.item');
for (var i = 0; i < $items.length; i++) {
console.log($items.eq(i).text());
}
// 或使用 for...of（ES6）
for (var item of $items) {
console.log($(item).text());
}5️⃣ .each() 的简写方式
javascript
// 方式1：箭头函数（ES6）
$('.item').each((index, element) => {
console.log(index, element);
});
// 方式2：直接链式调用
$('.item')
.each(function() {
$(this).addClass('active');
})
.css('color', 'blue');三、各种遍历方式对比 📊
| 方法 | 返回值 | 是否可中断 | 性能 | 适用场景 |
|---|---|---|---|---|
.each() |
jQuery对象 | ✅ return false 可中断 |
⭐⭐⭐ | 通用遍历，需要修改元素 |
.map() |
新数组 | ❌ 不可中断 | ⭐⭐⭐⭐ | 提取数据，转换为数组 |
.filter() |
筛选后的jQuery对象 | ❌ 不可中断 | ⭐⭐⭐⭐ | 筛选符合条件的元素 |
for 循环 |
无 | ✅ break 可中断 |
⭐⭐⭐⭐⭐ | 性能要求高，需要中断 |
for...of |
无 | ✅ break 可中断 |
⭐⭐⭐⭐⭐ | ES6语法，简洁高效 |
四、实际应用场景 🎯
场景1：批量修改样式
javascript
// 给所有 .card 添加悬停效果
$('.card').each(function() {
$(this).hover(
function() { $(this).css('transform', 'scale(1.05)'); },
function() { $(this).css('transform', 'scale(1)'); }
);
});场景2：表单验证
javascript
$('.required').each(function() {
if ($(this).val() === '') {
$(this).addClass('error');
hasError = true;
}
});场景3：动态生成内容
javascript
var html = '';
$('.item').each(function(index) {
html += '<li>' + $(this).text() + '</li>';
});
$('#list').append(html);场景4：获取所有选中的复选框
javascript
var selectedValues = $('input[type="checkbox"]:checked').map(function() {
return $(this).val();
}).get();
console.log(selectedValues); // ["value1", "value2"]场景5：图片懒加载
javascript
$('img[data-src]').each(function() {
var $img = $(this);
$img.attr('src', $img.data('src'));
});场景6：计算总价格
javascript
var total = 0;
$('.price').each(function() {
total += parseFloat($(this).text().replace('¥', ''));
});
$('#total').text('总计：¥' + total.toFixed(2));五、性能优化建议 ⚡
✅ 1. 缓存jQuery对象
javascript
// ❌ 差：重复查询
$('.item').css('color', 'red');
$('.item').text('hello');
// ✅ 好：缓存对象
var $items = $('.item');
$items.css('color', 'red');
$items.text('hello');✅ 2. 使用 .each() 时优先用原生JS
javascript
// ❌ 慢：每次都创建jQuery对象
$('.item').each(function() {
$(this).addClass('active'); // 重复创建jQuery对象
});
// ✅ 快：缓存this
$('.item').each(function() {
var $this = $(this); // 缓存一次
$this.addClass('active');
$this.css('color', 'red');
});✅ 3. 大量元素用原生 for 循环
javascript
// 元素超过1000个时，for循环更快
var items = $('.item');
for (var i = 0; i < items.length; i++) {
items.eq(i).addClass('active');
}✅ 4. 使用 .map().get() 替代 .each() 推数组
javascript
// ❌ 慢
var arr = [];
$('.item').each(function() {
arr.push($(this).text());
});
// ✅ 快
var arr = $('.item').map(function() {
return $(this).text();
}).get();六、常见问题解决 🔧
❌ 问题1：遍历后元素没有变化
原因 ：在 .each() 中使用了 this 而不是 $(this)
解决：
javascript
// ❌ 错
$('.item').each(function() {
this.text('hello'); // this是DOM对象，没有.text()方法
});
// ✅ 对
$('.item').each(function() {
$(this).text('hello'); // 包装成jQuery对象
});❌ 问题2：如何中断 .each() 循环？
解决 ：使用 return false
javascript
$('.item').each(function() {
if ($(this).text() === '停止') {
return false; // 中断循环（相当于break）
}
console.log($(this).text());
});❌ 问题3：如何跳过当前元素（continue）？
解决 ：使用 return true 或 return
javascript
$('.item').each(function() {
if ($(this).hasClass('skip')) {
return; // 跳过当前元素，继续下一个（相当于continue）
}
console.log($(this).text());
});❌ 问题4：遍历得到的索引从1开始？
解决 ：index 从0开始，需要+1
javascript
$('.item').each(function(index) {
console.log(index + 1); // 输出 1, 2, 3...
});💡 总结：该用哪个方法？
| 需求 | 推荐方法 |
|---|---|
| 通用遍历，修改元素 | .each() ⭐ |
| 提取数据转为数组 | .map().get() ⭐⭐ |
| 筛选符合条件的元素 | .filter() ⭐⭐ |
| 性能要求高，需要中断 | for 循环 / for...of ⭐⭐⭐ |
| 链式调用 | .each() + 链式方法 ⭐⭐ |
🎁 一句话总结
日常开发用
.each()最方便，提取数据用.map()，筛选用.filter()，性能优先用原生for循环！
🔥 速查表
javascript
// 获取元素
var $items = $('.item');
// 遍历并修改
$items.each(function() {
$(this).css('color', 'red');
});
// 提取数据
var texts = $items.map(function() {
return $(this).text();
}).get();
// 筛选元素
var filtered = $items.filter(function() {
return $(this).text().length > 5;
});
// 中断循环
$items.each(function() {
if (条件) return false; // 中断
if (条件) return; // 跳过
});觉得有用？点赞收藏不迷路 ❤️
有问题欢迎评论区交流！ 💬