jQuery遍歷元素
阿新 • • 發佈：2022-04-18
jQuery隱式迭代是對同一類元素做了同樣的操作。如果想要給同一類元素做不同操作，就需要用到遍歷。
語法：
1.each0方法遍歷匹配的每一個元素。主要用DOM處理。each每一個
⒉裡面的回撥函式有2個引數:index是每個元素的索引號; demEle是每個DOM元素物件，不是jquery物件
3.所以要想使用jquery方法，需要給這個dom元素轉換為jquery物件$(domEle)
程式碼示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>04-jQuery遍歷元素</title> </head> <body> <div>1</div> <div>2</div> <div>3</div> <script src="jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { // $("div").css("color","red"); //如果針對於同一類元素做不同操作，需要用到遍歷元素（類似for，但是比for強大) var sum = 0; // 1. each()方法遍歷元素 var arr = ["red", "green", "blue"]; $("div").each(function(i, domEle) {//回撥函式第一個引數一定是索引號 可以自己指定索引號號名稱 // console.log(index); // console.log(i); //回撥函式第二個引數一定是 dom元素物件 也是自己命名 // console.log(domEle); // domEle.css("color"); dom物件沒有css方法 $(domEle).css("color", arr[i]); sum += parseInt($(domEle).text()); }) console.log(sum); // 2． $.each)方法遍歷元素主要用於遍歷資料，處理資料 // $.each($("div"),function(i,ele){ // console.log(i); // console.log(ele); // }) $.each(arr, function(i, ele) { console.log(i); console.log(ele); }) $.each({ name: "andy", age: 18 }, function(i, ele) { console.log(i); //輸出的是name age 屬性名 console.log(ele); //輸出的是andy 18 屬性值 }) }) </script> </body> </html>