在网页开发中经常会碰到获取同种类型的 标签 的值得问题,比如下面的两种情况.
当需要批量获取同种标签的指定值时,新人就会碰上一点小麻烦.
比如 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="/UploadFiles/2021-04-02/jquery.min.js">
内容均打印在控制台
总结
以上所述是小编给大家介绍的jQuery 同时获取多个标签的指定内容并储存为数组，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。