如何使用jQuery中的each函數方法遍歷DOM元素

2019-12-11 14:54:55

在jQuery中，如果要遍歷DOM元素，可以使用each函數。each函數遍歷元素時，可以不傳引數，也可以傳一個或兩個引數，傳一個引數是代表元素的序號。下面利用幾個範例說明each函數的用法，操作如下：

第一步，雙擊開啟HBuilder編輯工具，新建靜態頁面each.html，並引入jquery3.3.1檔案，如下圖所示：

第二步，在<body></body>標籤元素內，插入一個div標籤元素；然後在div標籤內插入一個無序列表，如下圖所示：

第三步，在title標籤下插入<script></script>標籤，在標籤內編寫jQuery初始化函數，呼叫each函數遍歷無序列表子項元素，並列印序號和元素內容，如下圖所示：

第四步，儲存程式碼之後，在瀏覽器中預覽效果，開啟瀏覽器控制台，檢視列印結果，如下圖所示：

第五步，檢視瀏覽器控制台發現，無序列表子項的內容沒有列印出來；返回到HBuilder，檢查程式碼發現是$(i)出錯，應該為$(this)，如下圖所示：

第六步，再次儲存程式碼並在瀏覽器控制台中，檢視列印結果，可以看到無序列表中的文字內容也出現了，如下圖所示：