溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery 同時獲取多個標簽的指定內(nèi)容并儲存為數(shù)組

發(fā)布時間：2020-09-14 02:28:07 來源：腳本之家 閱讀：225 作者：粥里有勺糖 欄目：web開發(fā)

在網(wǎng)頁開發(fā)中經(jīng)常會碰到獲取同種類型的 標簽 的值得問題,比如下面的兩種情況.

jQuery 同時獲取多個標簽的指定內(nèi)容并儲存為數(shù)組

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

比如 id=problem1的demo

var list1=$("#problem1").children();//獲取到problem1指定的對象數(shù)組
console.log(list1);//打印到控制臺

jQuery 同時獲取多個標簽的指定內(nèi)容并儲存為數(shù)組

控制臺中輸出的跟我們想象中的是一樣的.那么接下來看下一段代碼

var list1=$("#problem1").children().html();
console.log(list1);

根據(jù)上面的內(nèi)容,新人就會認為list是一個 儲存的每個li對象中的值得數(shù)組

但控制臺的輸出結(jié)果為:

jQuery 同時獲取多個標簽的指定內(nèi)容并儲存為數(shù)組

只輸出了第一個li中的內(nèi)容,新人(我)在這里就懵逼了(想不通),為什么跟想象中的完全不同

經(jīng)過查閱各種資料,最終找到了問題所在:

此時的list1的數(shù)組中

jQuery 同時獲取多個標簽的指定內(nèi)容并儲存為數(shù)組

每個元素已經(jīng)不是'li'對象,如此運行控制臺會報錯:

jQuery 同時獲取多個標簽的指定內(nèi)容并儲存為數(shù)組

這里想要達到我們的目的必須要用到

JQuery中的each()方法:

each() 方法為每個匹配元素規(guī)定要運行的函數(shù)。

語法

$( selector ).each(function (index,element) )

所以我們采用以下方式獲取到我們所需要的內(nèi)容

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

jQuery 同時獲取多個標簽的指定內(nèi)容并儲存為數(shù)組

我們想要達到的目的便實現(xiàn)了.

下面是完整的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>要獲取的內(nèi)容1</li>
     <li>要獲取的內(nèi)容2</li>
     <li>要獲取的內(nèi)容3</li>
     <li>要獲取的內(nèi)容4</li>
     <li>要獲取的內(nèi)容5</li>
   </ul>
   <!-- 第二種 -->
   <ul id="problem2">
     <li> <span>類型:</span>
       <div>要獲取的內(nèi)容2</div>
     </li>
     <li> <span>類型:</span>
       <div>要獲取的內(nèi)容3</div>
     </li>
     <li> <span>類型:</span>
       <div>要獲取的內(nèi)容4</div>
     </li>
     <li> <span>類型:</span>
       <div>要獲取的內(nèi)容5</div>
     </li>
     <li> <span>類型:</span>
       <div>要獲取的內(nèi)容6</div>
     </li>
   </ul>
 </body>
 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
 <script>
   var array = new Array();//聲明一個新的數(shù)組
   var list1 = $("#problem1").children().each(function (index, element) {//遍歷每個對象
     array.push($(this).html());//往數(shù)組中存入值
   });
   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>

內(nèi)容均打印在控制臺

總結(jié)

以上所述是小編給大家介紹的jQuery 同時獲取多個標簽的指定內(nèi)容并儲存為數(shù)組，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手