使用jQuery獲取一類元素并遍歷它們的方法和實(shí)踐指南
更新時(shí)間：2026年05月17日 08:32:35 作者：detayun
在前端開發(fā)中,我們經(jīng)常需要獲取頁(yè)面中一類元素（比如所有的圖片、所有的按鈕、所有的列表項(xiàng)等）,然后對(duì)它們進(jìn)行批量操作,jQuery提供了非常強(qiáng)大的選擇器和遍歷方法,讓這件事變得超級(jí)簡(jiǎn)單,需要的朋友可以參考下
本文將從獲取元素到遍歷操作，全面講解各種方法和最佳實(shí)踐！
一、獲取一類元素的方法
在遍歷之前，我們首先要選中這類元素。jQuery提供了多種選擇器：
1?? 通過(guò)類名獲取最常用
// 獲取所有 class="item" 的元素
var $items = $('.item');
console.log($items.length); // 打印元素個(gè)數(shù)
2?? 通過(guò)標(biāo)簽名獲取
// 獲取所有 <div> 元素
var $divs = $('div');
// 獲取所有 <img> 元素
var $imgs = $('img');
3?? 通過(guò)屬性獲取
// 獲取所有 type="text" 的輸入框
var $inputs = $('input[type="text"]');
// 獲取所有 name 開頭為 "user" 的元素
var $users = $('[name^="user"]');
4?? 組合選擇器（更精確）
// 獲取 .container 下的所有 .item
var $items = $('.container .item');
// 獲取 ul > li（直接子元素）
var $lis = $('ul > li');
// 獲取所有帶有 data-id 屬性的元素
var $items = $('[data-id]');
5?? 獲取元素后存儲(chǔ)
// ? 推薦：緩存jQuery對(duì)象，避免重復(fù)查詢
var $buttons = $('.btn'); // 查詢一次，多次使用
// ? 不推薦：每次都重新查詢
$('.btn').css('color', 'red');
$('.btn').text('點(diǎn)擊'); // 重復(fù)查詢，性能差
二、遍歷元素的核心方法
獲取到元素集合后，就可以開始遍歷了！
1??.each()方法最常用
語(yǔ)法：
$('.item').each(function(index, element) {
// index: 當(dāng)前索引（從0開始）
// element: 當(dāng)前DOM元素（原生JS對(duì)象）
// this: 當(dāng)前jQuery對(duì)象
});
示例1：修改所有元素的文本
$('.item').each(function(index) {
$(this).text('第' + (index + 1) + '個(gè)元素');
});
示例2：給所有圖片添加點(diǎn)擊事件
$('img').each(function() {
$(this).on('click', function() {
alert('你點(diǎn)擊了第' + ($(this).index() + 1) + '張圖片');
});
});
示例3：獲取所有元素的文本并存入數(shù)組
var texts = [];
$('.item').each(function() {
texts.push($(this).text());
});
console.log(texts); // ["文本1", "文本2", "文本3"]
2??.map()方法返回新數(shù)組
語(yǔ)法：
var newArray = $('.item').map(function(index, element) {
return $(this).text(); // 返回值會(huì)組成新數(shù)組
}).get(); // .get() 轉(zhuǎn)換為原生數(shù)組
示例：提取所有價(jià)格
var prices = $('.price').map(function() {
return parseFloat($(this).text().replace('￥', ''));
}).get();
console.log(prices); // [19.9, 29.9, 39.9]
3??.filter()方法篩選元素
語(yǔ)法：
var filtered = $('.item').filter(function(index) {
return $(this).text().length > 5; // 返回true的元素保留
});
示例：篩選文本長(zhǎng)度大于5的元素
var longTexts = $('.item').filter(function() {
return $(this).text().length > 5;
}).css('color', 'red');
4??for循環(huán)（原生JS）
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()的簡(jiǎn)寫方式
// 方式1：箭頭函數(shù)（ES6）
$('.item').each((index, element) => {
console.log(index, element);
});
// 方式2：直接鏈?zhǔn)秸{(diào)用
$('.item')
.each(function() {
$(this).addClass('active');
})
.css('color', 'blue');
三、各種遍歷方式對(duì)比
| 方法 | 返回值 | 是否可中斷 | 性能 | 適用場(chǎng)景 |
|---|---|---|---|---|
.each() | jQuery對(duì)象 | ? return false 可中斷 | ??? | 通用遍歷，需要修改元素 |
.map() | 新數(shù)組 | ? 不可中斷 | ???? | 提取數(shù)據(jù)，轉(zhuǎn)換為數(shù)組 |
.filter() | 篩選后的jQuery對(duì)象 | ? 不可中斷 | ???? | 篩選符合條件的元素 |
for 循環(huán) | 無(wú) | ? break 可中斷 | ????? | 性能要求高，需要中斷 |
for...of | 無(wú) | ? break 可中斷 | ????? | ES6語(yǔ)法，簡(jiǎn)潔高效 |
四、實(shí)際應(yīng)用場(chǎng)景
場(chǎng)景1：批量修改樣式
// 給所有 .card 添加懸停效果
$('.card').each(function() {
$(this).hover(
function() { $(this).css('transform', 'scale(1.05)'); },
function() { $(this).css('transform', 'scale(1)'); }
);
});
場(chǎng)景2：表單驗(yàn)證
$('.required').each(function() {
if ($(this).val() === '') {
$(this).addClass('error');
hasError = true;
}
});
場(chǎng)景3：動(dòng)態(tài)生成內(nèi)容
var html = '';
$('.item').each(function(index) {
html += '<li>' + $(this).text() + '</li>';
});
$('#list').append(html);
場(chǎng)景4：獲取所有選中的復(fù)選框
var selectedValues = $('input[type="checkbox"]:checked').map(function() {
return $(this).val();
}).get();
console.log(selectedValues); // ["value1", "value2"]
場(chǎng)景5：圖片懶加載
$('img[data-src]').each(function() {
var $img = $(this);
$img.attr('src', $img.data('src'));
});
場(chǎng)景6：計(jì)算總價(jià)格
var total = 0;
$('.price').each(function() {
total += parseFloat($(this).text().replace('￥', ''));
});
$('#total').text('總計(jì)：￥' + total.toFixed(2));
五、性能優(yōu)化建議
? 1. 緩存jQuery對(duì)象
// ? 差：重復(fù)查詢
$('.item').css('color', 'red');
$('.item').text('hello');
// ? 好：緩存對(duì)象
var $items = $('.item');
$items.css('color', 'red');
$items.text('hello');
? 2. 使用.each()時(shí)優(yōu)先用原生JS
// ? 慢：每次都創(chuàng)建jQuery對(duì)象
$('.item').each(function() {
$(this).addClass('active'); // 重復(fù)創(chuàng)建jQuery對(duì)象
});
// ? 快：緩存this
$('.item').each(function() {
var $this = $(this); // 緩存一次
$this.addClass('active');
$this.css('color', 'red');
});
? 3. 大量元素用原生for循環(huán)
// 元素超過(guò)1000個(gè)時(shí)，for循環(huán)更快
var items = $('.item');
for (var i = 0; i < items.length; i++) {
items.eq(i).addClass('active');
}
? 4. 使用.map().get()替代.each()推數(shù)組
// ? 慢
var arr = [];
$('.item').each(function() {
arr.push($(this).text());
});
// ? 快
var arr = $('.item').map(function() {
return $(this).text();
}).get();
六、常見問(wèn)題解決
? 問(wèn)題1：遍歷后元素沒(méi)有變化
原因：在 .each() 中使用了 this 而不是 $(this)
解決：
// ? 錯(cuò)
$('.item').each(function() {
this.text('hello'); // this是DOM對(duì)象，沒(méi)有.text()方法
});
// ? 對(duì)
$('.item').each(function() {
$(this).text('hello'); // 包裝成jQuery對(duì)象
});
? 問(wèn)題2：如何中斷.each()循環(huán)？
解決：使用 return false
$('.item').each(function() {
if ($(this).text() === '停止') {
return false; // 中斷循環(huán)（相當(dāng)于break）
}
console.log($(this).text());
});
? 問(wèn)題3：如何跳過(guò)當(dāng)前元素（continue）？
解決：使用 return true 或 return
$('.item').each(function() {
if ($(this).hasClass('skip')) {
return; // 跳過(guò)當(dāng)前元素，繼續(xù)下一個(gè)（相當(dāng)于continue）
}
console.log($(this).text());
});
? 問(wèn)題4：遍歷得到的索引從1開始？
解決：index 從0開始，需要+1
$('.item').each(function(index) {
console.log(index + 1); // 輸出 1, 2, 3...
});
總結(jié)：該用哪個(gè)方法？
| 需求 | 推薦方法 |
|---|---|
| 通用遍歷，修改元素 | .each() ? |
| 提取數(shù)據(jù)轉(zhuǎn)為數(shù)組 | .map().get() ?? |
| 篩選符合條件的元素 | .filter() ?? |
| 性能要求高，需要中斷 | for 循環(huán) / for...of ??? |
| 鏈?zhǔn)秸{(diào)用 | .each() + 鏈?zhǔn)椒椒??? |
一句話總結(jié)
日常開發(fā)用 .each() 最方便，提取數(shù)據(jù)用 .map()，篩選用 .filter()，性能優(yōu)先用原生 for 循環(huán)！
速查表
// 獲取元素
var $items = $('.item');
// 遍歷并修改
$items.each(function() {
$(this).css('color', 'red');
});
// 提取數(shù)據(jù)
var texts = $items.map(function() {
return $(this).text();
}).get();
// 篩選元素
var filtered = $items.filter(function() {
return $(this).text().length > 5;
});
// 中斷循環(huán)
$items.each(function() {
if (條件) return false; // 中斷
if (條件) return; // 跳過(guò)
});
以上就是使用jQuery獲取一類元素并遍歷它們的詳細(xì)內(nèi)容，更多關(guān)于jQuery獲取類元素并遍歷的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
我們有時(shí)使用jQuery新加元素后，會(huì)出現(xiàn)新元素不會(huì)執(zhí)行一部分原有的事件函數(shù)。本文主要介紹了jQuery解決添加元素后不執(zhí)行原有事件的方法，感興趣的同學(xué)可以了解一下2021-11-11
jquery彈出框插件jquery.ui.dialog用法分析
這篇文章主要介紹了jquery彈出框插件jquery.ui.dialog用法,結(jié)合實(shí)例形式分析了彈出框插件jquery.ui.dialog的功能、下載、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-08-08
JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用示例
這篇文章主要介紹了JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用,結(jié)合實(shí)例形式分析了jQuery動(dòng)態(tài)修改css樣式、事件響應(yīng)以及選項(xiàng)卡相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
jQuery實(shí)現(xiàn)圖片漸入漸出切換展示效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片漸入漸出切換展示效果,需要的朋友可以參考下2015-08-08
用Jquery實(shí)現(xiàn)滾動(dòng)新聞
此文主要用Jquery實(shí)現(xiàn)滾動(dòng)新聞,Jquery的強(qiáng)大功能，幾行代碼即可實(shí)現(xiàn)，需要的朋友可以參考下2014-02-02
jquery分頁(yè)插件jquery.pagination.js使用方法解析
這篇文章主要針對(duì)js分頁(yè)插件jquery.pagination.js使用方法進(jìn)行解析，很實(shí)用的分頁(yè)插件，感興趣的小伙伴們可以參考一下2016-04-04
jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)
本篇文章主要是對(duì)jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
jQuery實(shí)現(xiàn)仿路邊燈箱廣告圖片輪播效果
本文給大家介紹的是使用jQuery實(shí)現(xiàn)仿路邊燈箱廣告圖片輪播切換特效，效果非常棒，有需要的小伙伴可以參考下。2015-04-04
Jquery 綁定時(shí)間實(shí)現(xiàn)代碼
jquery 顯示本地時(shí)間/ 帶日期、星期/ UTC，需要的朋友可以參考下。2011-05-05
這篇文章主要介紹了jQuery中hasClass()方法用法,實(shí)例分析了hasClass()方法的功能、定義及驗(yàn)證匹配元素是否包含指定類的使用技巧,需要的朋友可以參考下2015-01-01