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


Posted in jQuery onNovember 20, 2018

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

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

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

比如 id=problem1的demo

var list1=$("#problem1").children();//获取到problem1指定的对象数组
console.log(list1);//打印到控制台

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

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

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

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

但控制台的输出结果为:

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

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

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

此时的list1的数组中

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

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

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

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

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);

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

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

下面是完整的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 相关文章推荐
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 #jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 #jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 #jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 #jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 #jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 #jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
You might like
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
vue小白入门教程
2018/04/02 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
python实现网页链接提取的方法分享
2014/02/25 Python
Python文件和流(实例讲解)
2017/09/12 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
django admin组件使用方法详解
2019/07/19 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
团委竞选演讲稿
2014/04/24 职场文书
专家推荐信怎么写
2015/03/25 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
怎样写好工作计划
2019/04/10 职场文书
JS高级程序设计之class继承重点详解
2022/07/07 Javascript