jQuery中10個非常有用的遍歷函數

使用jQuery ，可以很容易的選擇HTML元素。但有些時候，在HTML結構較為複雜時，提煉我們選擇的元素就是一件麻煩的事。在這篇教學中，我們將探討十種方法去精煉和擴展我們將要操作的集合。

HTML

首先，讓我們看看下圖所示的簡單的頁面，透過這個教學我們將選擇這些元素。

1. div.container是包裹元素；
2. div.photo 、 div.title 、 div.rating是div.container的直接子級；
3. 每個div.star是div.rating的子級；
4. 當div.satr的class為「on」時，它是一個完整的sta
5. 。
6. 為什麼要遍歷？

   “為什麼我們要進一步提煉一系列元素，難道是jQuery選擇語法不夠強大？ ”

   好，讓我們從範例開始。在上面提到的網頁中，當一個star被點擊時，我們需要為它以及左邊的每個star添加class“on” 。同時，我們要改變所有star父元素的背景顏色，因此，我們的程式碼如下：

   在第二行，我們得到了我們點擊的當前物件。但是，如何得到stars的父級？即div.rating 。但是，在一個頁面中，有許多div.rating 。哪一個是我們想要的？如何獲得「this」左邊所有的star ？

   可喜的是， jQuery允許我們基於這些基層關係，在現存集合的基礎上獲得新的元素集合。而這些正是遍歷函數發揮作用的地方。

   1 、 children

   這個函數得到一組元素的直接子層級。

   在很多情況下會很方便，看看下面這張圖：

   1. 開始的時候容器中的star全部被選到；
   2. 給children()傳遞一個選擇表達式將選擇結果縮小至選取的star ；
   3. 如果chilidren()每接受任何參數，將傳回所有直接子級；
   4. 不返回孫級元素。
   5. 

   $('.star').click(function(){

            $(this).addClass('on');

   //        如何選取目前物件的父元素?

   //        如何獲得當前star左側所有的star?

   });