jQuery的DOM(文檔對(duì)象模型).each()方法在DOM元素集合中循環(huán)并執(zhí)行指定的函數(shù)。該方法非常有用,可以輕松處理網(wǎng)頁(yè)上的多個(gè)元素。
$(selector).each(function() { // 在此處運(yùn)行函數(shù) });
該方法的語(yǔ)法很簡(jiǎn)單,只需要指定所需的選擇器并在每個(gè)元素上運(yùn)行函數(shù)。例如,我們可以遍歷每個(gè)p標(biāo)簽,然后應(yīng)用CSS樣式:
$('p').each(function() { $(this).css('color', 'red'); });
在這個(gè)例子中,我們選擇了所有的p標(biāo)簽,并在它們上面運(yùn)行了一個(gè)函數(shù)。在函數(shù)中,我們使用了jQuery的css()方法,將文字顏色改為紅色。值得注意的是,我們使用了$(this)來(lái)引用當(dāng)前的p標(biāo)簽。
另一個(gè)示例是在所有圖片上添加點(diǎn)擊事件監(jiān)聽(tīng)器:
$('img').each(function() { $(this).click(function() { alert('你點(diǎn)擊了一張圖片!'); }); });
在這個(gè)示例中,我們選擇所有的img標(biāo)簽,并在每個(gè)標(biāo)簽上添加了一個(gè)click()函數(shù)。當(dāng)用戶(hù)點(diǎn)擊任何一個(gè)圖片時(shí),將彈出一個(gè)警告框。
不能忽略的一點(diǎn)是,.each()方法還可以傳遞參數(shù)??梢詫?shù)傳遞給each()方法中的函數(shù),以便在函數(shù)中進(jìn)行使用。例如:
$('p').each(function(index) { $(this).text('這是第' + (index+1) + '段文本'); });
在這個(gè)例子中,我們使用了一個(gè)名稱(chēng)為index的參數(shù)。索引是函數(shù)的第一個(gè)參數(shù),表示每個(gè)元素在集合中的位置。在函數(shù)中使用index參數(shù),我們將每個(gè)p標(biāo)簽中的文字設(shè)置為“這是第index+1段文本?!?/p>
總的來(lái)說(shuō),.each()方法在DOM操作中很有用,可以幫助我們選擇多個(gè)元素并處理它們。您可以做任何你想做的事情,從添加事件監(jiān)聽(tīng)器到更改文本和樣式。