jQuery中10個(gè)非常有用的遍歷函數(shù)使用jQuery,可以很容易的選擇HTML元素。但有些時(shí)候,在HTML結(jié)構(gòu)較為復(fù)雜時(shí),提煉我們選擇的元素就是一件麻煩的事情。在這篇教程中,我們將探討十種方法去精煉和擴(kuò)展我們將要操作的集合。 HTML 首先,讓我們看看下圖所示的簡(jiǎn)單的頁(yè)面,通過這個(gè)教程我們將選擇這些元素。 div.container是包裹元素; div.photo、div.title、div.rating是div.container的直接子級(jí); 每個(gè)div.star是div.rating的子級(jí); 當(dāng)div.satr的class為“on”時(shí),它是一個(gè)完整的star。 為什么要遍歷? “為什么我們要進(jìn)一步提煉一系列元素,難道是jQuery選擇語法不夠強(qiáng)大?” 好,讓我們從示例開始。在上面提到的網(wǎng)頁(yè)中,當(dāng)一個(gè)star被點(diǎn)擊時(shí),我們需要給它以及左邊的每個(gè)star添加class“on”。與此同時(shí),我們要改變所有star父元素的背景顏色,因此,我們的代碼如下: $(".star").click(function(){ $(this).addClass("on"); // 如何選取當(dāng)前對(duì)象的父元素? // 如何獲得當(dāng)前star左側(cè)所有的star? }); 在第二行,我們得到了我們點(diǎn)擊的當(dāng)前對(duì)象。但是,如何得到stars的父級(jí)?即div.rating。但是,在一個(gè)頁(yè)面中,有很多div.rating。哪一個(gè)是我們想要的?如何獲得“this”左邊所有的star? 可喜的是,jQuery允許我們基于這些基層關(guān)系,在現(xiàn)存集合的基礎(chǔ)上獲得新的元素集合。而這些正是遍歷函數(shù)發(fā)揮作用的地方。 1、children 這個(gè)函數(shù)得到一組元素的直接子級(jí)。 在很多情況下會(huì)很方便,看看下面這張圖: 開始的時(shí)候容器中的star全部被選擇; 給children()傳遞一個(gè)選擇表達(dá)式將選擇結(jié)果縮小至選中的star; 如果chilidren()每接受任何參數(shù),將返回所有直接子級(jí); 不返回孫級(jí)元素。