jQuery 同時獲取多個標簽的指定內容并儲存為數組

來源：懂視網責編：小采時間：2020-11-27 22:03:47

jQuery 同時獲取多個標簽的指定內容并儲存為數組

jQuery 同時獲取多個標簽的指定內容并儲存為數組:在網頁開發中經常會碰到獲取同種類型的標簽的值得問題,比如下面的兩種情況. 當需要批量獲取同種標簽的指定值時,新人就會碰上一點小麻煩. 比如 id=problem1的demo var list1=$(#problem1).children();//獲取到problem1指定的對象數組

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery 同時獲取多個標簽的指定內容并儲存為數組:在網頁開發中經常會碰到獲取同種類型的標簽的值得問題,比如下面的兩種情況. 當需要批量獲取同種標簽的指定值時,新人就會碰上一點小麻煩. 比如 id=problem1的demo var list1=$(#problem1).children();//獲取到problem1指定的對象數組

在網頁開發中經常會碰到獲取同種類型的標簽的值得問題,比如下面的兩種情況.

當需要批量獲取同種標簽的指定值時,新人就會碰上一點小麻煩.

比如 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) )

所以我們采用以下方式獲取到我們所需要的內容

 var array=new Array();//聲明一個新的數組
 var list1=$("#problem1").children().each(function (index,element) {//遍歷每個對象
 array.push($(this).html());//往數組中存入值
});
 console.log(array);

我們想要達到的目的便實現了.

下面是完整的demo:

 <!DOCTYPE html>
 <html> 
 <head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>demo</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 <!-- 第一種 -->
 <ul id="problem1">
 <li>要獲取的內容1</li>
 <li>要獲取的內容2</li>
 <li>要獲取的內容3</li>
 <li>要獲取的內容4</li>
 <li>要獲取的內容5</li>
 </ul>
 <!-- 第二種 -->
 <ul id="problem2">
 <li> <span>類型:</span>
 <div>要獲取的內容2</div>
 </li>
 <li> <span>類型:</span>
 <div>要獲取的內容3</div>
 </li>
 <li> <span>類型:</span>
 <div>要獲取的內容4</div>
 </li>
 <li> <span>類型:</span>
 <div>要獲取的內容5</div>
 </li>
 <li> <span>類型:</span>
 <div>要獲取的內容6</div>
 </li>
 </ul>
 </body>
 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
 <script>
 var array = new Array();//聲明一個新的數組
 var list1 = $("#problem1").children().each(function (index, element) {//遍歷每個對象
 array.push($(this).html());//往數組中存入值
 });
 console.log(array);
 var array2 = new Array();
 var list2 = $("#problem2").children().children('div').each(function (key, val) {
 array2.push($(this).html());
 })
 console.log(array2);
 </script>
 </html>

內容均打印在控制臺

總結

以上所述是小編給大家介紹的jQuery 同時獲取多個標簽的指定內容并儲存為數組，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com