jQuery的強大之處之一就是能夠輕松地遍歷一個集合。一個集合可以是一個HTML元素集合、一個jQuery對象集合或任何其它具有相同結構的集合。下面將介紹如何使用jQuery來遍歷一個集合。
// 獲取一個有5個元素的集合 var $collection = $('li'); // 遍歷集合并輸出每個元素 $collection.each(function(index, element) { console.log('元素' + index + '的內容是:' + $(element).text()); });
上述代碼首先使用jQuery選擇器獲取一個有5個元素的集合,然后使用each()函數(shù)遍歷這個集合。each()函數(shù)接收一個回調函數(shù)作為參數(shù),每次遍歷集合時調用此函數(shù)。回調函數(shù)的第一個參數(shù)是元素的索引,第二個參數(shù)是元素對象本身。在回調函數(shù)中通過$(element)將元素對象轉換成jQuery對象,然后使用text()方法獲取元素文本并輸出。
除了each()方法外,jQuery還提供了一些其它的遍歷方法,如map()、filter()、find()等。這些方法返回的是新的jQuery對象,可以進一步操作,如添加樣式、綁定事件等。
// 使用filter()方法選擇一個集合中的子集 var $filteredCollection = $collection.filter(':odd'); // 遍歷子集并添加樣式 $filteredCollection.each(function() { $(this).addClass('odd'); });
上述代碼中,filter()方法選擇了集合中的奇數(shù)元素,然后使用each()方法遍歷這個子集并添加樣式。注意每次遍歷時,this指向的是當前元素對象,需要使用jQuery將其轉換成jQuery對象才能進行操作。