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

更新时间：2018年11月20日 11:23:34 作者：粥里有勺糖

这篇文章主要介绍了jQuery 同时获取多个标签的指定内容并储存为数组的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

比如 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 同时获取多个标签的指定内容并储存为数组，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

jQuery解析XML 详解及方法总结
这篇文章主要介绍了jQuery解析XML 实例详解的相关资料,需要的朋友可以参考下
2016-09-09
jQuery实现鼠标经过事件的延时处理效果
这篇文章主要为大家详细介绍了jQuery实现鼠标经过事件的延时处理效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-10-10
基于Jquery和html5实现炫酷的3D焦点图动画
这篇文章主要介绍了基于Jquery和html5实现炫酷的3D焦点图动画的相关资料，焦点图中的图片利用了CSS3的相关特性实现图片倾斜效果，从而让图片出现3D的视觉效果，感兴趣的小伙伴们可以参考一下
2016-03-03
jQuery使用$获取对象后检查该对象是否存在的实现方法
下面小编就为大家带来一篇jQuery使用$获取对象后检查该对象是否存在的实现方法。小编觉而挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
ASP.NET中AJAX 调用实例代码
最近在ASP.NET中做了一个AJAX调用 : Client端先从ASP.NET Server后台取到一个页面模板，然后在页面初始化时再从Server中取一些相关数据以实现页面模板的动态显示
2012-05-05
Jquery仿IGoogle实现可拖动窗口示例代码
这个拖动窗口是根据一个Jquery的框架直接做出来的:easywidgets，废话就不多说了，直接把源代码贴出来，让大家学习
2014-08-08
jQuery轻量级表单模型验证插件
这篇文章主要介绍了jQuery轻量级表单模型验证插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
jQuery晃动层特效实现方法
这篇文章主要介绍了jQuery晃动层特效实现方法,实例分析了animate方法与css样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
jQuery提交多个表单的小例子
这篇文章介绍了jQuery提交多个表单的小例子，有需要的朋友可以参考一下
2013-06-06
jQuery学习笔记之 Ajax操作篇（二） - 数据传递
在前一篇介绍 jQuery Ajax 的数据加载中的例子都是从静态的文件中取得数据，而 Ajax 更大的价值在于与后端服务器进行数据传递，动态地请求和发送数据。
2014-06-06