在網頁開發中經常會碰到擷取同種類型的 标簽 的值得問題,比如下面的兩種情況.
當需要批量擷取同種标簽的指定值時,新人就會碰上一點小麻煩.
比如 id=problem1的demo
var list1=$("#problem1").children();//擷取到problem1指定的對象數組
console.log(list1);//列印到控制台 
控制台中輸出的跟我們想象中的是一樣的.那麼接下來看下一段代碼
var list1=$("#problem1").children().html();
console.log(list1); 根據上面的内容,新人就會認為list是一個 儲存的每個li對象中的值得數組
但控制台的輸出結果為:
隻輸出了第一個li中的内容,新人(我)在這裡就懵逼了(想不通),為什麼跟想象中的完全不同
經過查閱各種資料,最終找到了問題所在:
此時的list1的數組中
每個元素已經不是'li'對象,如此運作控制台會報錯:
這裡想要達到我們的目的必須要用到
JQuery中的each()方法:
each() 方法為每個比對元素規定要運作的函數。
文法
$(selector).each(function(index,element))
是以我們采用以下方式擷取到我們所需要的内容
1 var array=new Array();//聲明一個新的數組
2 var list1=$("#problem1").children().each(function (index,element) {//周遊每個對象
3 array.push($(this).html());//往數組中存入值
4 });
5 console.log(array); 我們想要達到的目的便實作了.
下面是完整的demo:
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>demo</title>
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 </head>
10
11 <body>
12 <!-- 第一種 -->
13 <ul id="problem1">
14 <li>要擷取的内容1</li>
15 <li>要擷取的内容2</li>
16 <li>要擷取的内容3</li>
17 <li>要擷取的内容4</li>
18 <li>要擷取的内容5</li>
19 </ul>
20 <!-- 第二種 -->
21 <ul id="problem2">
22 <li> <span>類型:</span>
23 <div>要擷取的内容2</div>
24 </li>
25 <li> <span>類型:</span>
26 <div>要擷取的内容3</div>
27 </li>
28 <li> <span>類型:</span>
29 <div>要擷取的内容4</div>
30 </li>
31 <li> <span>類型:</span>
32 <div>要擷取的内容5</div>
33 </li>
34 <li> <span>類型:</span>
35 <div>要擷取的内容6</div>
36 </li>
37 </ul>
38 </body>
39 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
40 <script>
41 var array = new Array();//聲明一個新的數組
42 var list1 = $("#problem1").children().each(function (index, element) {//周遊每個對象
43 array.push($(this).html());//往數組中存入值
44 });
45 console.log(array);
46
47 var array2 = new Array();
48 var list2 = $("#problem2").children().children('div').each(function (key, val) {
49 array2.push($(this).html());
50 })
51 console.log(array2);
52 </script>
53
54 </html> 内容均列印在控制台
Every day is wonderful ！
"你的指尖,擁有改變世界的力量! "
歡迎關注我的個人部落格:https://sugarat.top