在網頁開發中經常會碰到獲取同種類型的 標籤 的值得問題,比如下面的兩種情況.
當需要批量獲取同種標籤的指定值時,新人就會碰上一點小麻煩.
比如 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 ！