您好,登錄后才能下訂單哦!
在網頁開發中經常會碰到獲取同種類型的 標簽 的值得問題,比如下面的兩種情況.
當需要批量獲取同種標簽的指定值時,新人就會碰上一點小麻煩.
比如 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 同時獲取多個標簽的指定內容并儲存為數組,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。