jQuery 同时获取多个标签的指定内容并储存为数组

心已赠人 2023-01-14 01:43 116阅读 0赞

在网页开发中经常会碰到获取同种类型的 标签 的值得问题,比如下面的两种情况.

![47095f496f9b8db2092bc91c3e49f28b.png][]

当需要批量获取同种标签的指定值时,新人就会碰上一点小麻烦.

比如 `id=problem1的demo`

<table> 
 <tbody> 
 <tr> 
 <td> <pre><code>var list1=$("#problem1").children();//获取到problem1指定的对象数组
console.log(list1);//打印到控制台</code></pre> &nbsp; </td> 
 <td>&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

![69d16da40019ea23a89822231b75d280.png][]

控制台中输出的跟我们想象中的是一样的.那么接下来看下一段代码

<table> 
 <tbody> 
 <tr> 
 <td> <pre><code>12	var list1=$("#problem1").children().html();
console.log(list1);</code></pre> &nbsp; </td> 
 <td>&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

根据上面的内容,新人就会认为list是一个 储存的每个li对象中的值得数组

但控制台的输出结果为:

![fcc3685080b6f3b93fdb7880cf8ffce0.png][]

只输出了第一个li中的内容,新人(我)在这里就懵逼了(想不通),为什么跟想象中的完全不同

经过查阅各种资料,最终找到了问题所在:

此时的list1的数组中

![1e0aefd548ea6c58ec833c21882d368c.png][]

每个元素已经不是'li'对象,如此运行控制台会报错:

![b5e3c81819d7c0915a65cd863362d3cc.png][]

这里想要达到我们的目的必须要用到

**JQuery中的each()方法:**

each() 方法为每个匹配元素规定要运行的函数。

语法

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

所以我们采用以下方式获取到我们所需要的内容

<table> 
 <tbody> 
 <tr> 
 <td> <pre><code>var array=new Array();//声明一个新的数组&nbsp;

var list1=$("#problem1").children().each(function (index,element) {
 //遍历每个对象&nbsp;&nbsp;&nbsp;
array.push($(this).html());
 //往数组中存入值
});&nbsp;
console.log(array);</code></pre> &nbsp; </td> 
 <td>&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

![4be609a78792d14fc70f9a0de6ae53c8.png][]

我们想要达到的目的便实现了.

下面是完整的demo:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 </td> 
 <td> <code>&lt;!DOCTYPE html&gt;</code> <code>&lt;html&gt; </code> <code>&lt;head&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;meta charset=</code><code>"utf-8"</code> <code>/&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;meta http-equiv=</code><code>"X-UA-Compatible"</code> <code>content=</code><code>"IE=edge"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;title&gt;demo&lt;/title&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;meta name=</code><code>"viewport"</code> <code>content=</code><code>"width=device-width, initial-scale=1"</code><code>&gt;</code> <code>&lt;/head&gt;</code> <code>&lt;body&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;!-- 第一种 --&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;ul id=</code><code>"problem1"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;要获取的内容1&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;要获取的内容2&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;要获取的内容3&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;要获取的内容4&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;要获取的内容5&lt;/li&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/ul&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;!-- 第二种 --&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;ul id=</code><code>"problem2"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt; &lt;span&gt;类型:&lt;/span&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;要获取的内容2&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt; &lt;span&gt;类型:&lt;/span&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;要获取的内容3&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt; &lt;span&gt;类型:&lt;/span&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;要获取的内容4&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt; &lt;span&gt;类型:&lt;/span&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;要获取的内容5&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt; &lt;span&gt;类型:&lt;/span&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;要获取的内容6&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/li&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/ul&gt;</code> <code>&lt;/body&gt;</code> <code>&lt;script src=</code><code>"<a href="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js" rel="nofollow">https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js</a>"</code><code>&gt;&lt;/script&gt;</code> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;</code><code>var</code> <code>array = </code><code>new</code> <code>Array();</code><code>//声明一个新的数组</code> <code>&nbsp;&nbsp;</code><code>var</code> <code>list1 = $(</code><code>"#problem1"</code><code>).children().each(</code><code>function</code> <code>(index, element) { </code><code>//遍历每个对象</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>array.push($(</code><code>this</code><code>).html());</code><code>//往数组中存入值</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>console.log(array);</code> <code>&nbsp;&nbsp;</code><code>var</code> <code>array2 = </code><code>new</code> <code>Array();</code> <code>&nbsp;&nbsp;</code><code>var</code> <code>list2 = $(</code><code>"#problem2"</code><code>).children().children(</code><code>'div'</code><code>).each(</code><code>function</code> <code>(key, val) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>array2.push($(</code><code>this</code><code>).html());</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;</code><code>console.log(array2);</code> <code>&lt;/script&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

查看前端面试题小程序， MST题库

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70][]

[47095f496f9b8db2092bc91c3e49f28b.png]: /images/20221022/1b5a7b8d31d14869b8aa45235269904b.png
[69d16da40019ea23a89822231b75d280.png]: /images/20221022/9ec526d1798f4d79976fee78392a5b22.png
[fcc3685080b6f3b93fdb7880cf8ffce0.png]: /images/20221022/f982ba4efb11409bbf65ff04abbd7d54.png
[1e0aefd548ea6c58ec833c21882d368c.png]: /images/20221022/afc346d8564845f7837b55d9c3a9cd74.png
[b5e3c81819d7c0915a65cd863362d3cc.png]: /images/20221022/c854477694fd485c931027e26b209adb.png
[4be609a78792d14fc70f9a0de6ae53c8.png]: /images/20221022/487001ffc3c842eeaf5e638a2ba12afb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70]: /images/20221022/507a14242a7b4126831a89e231ed04d6.png