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输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 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调用三种数据库的方法(2)
2006/10/09 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
Web服务器框架 Tornado简介
2014/07/16 Python
Python回调函数用法实例详解
2015/07/02 Python
python中os模块详解
2016/10/14 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
python书籍信息爬虫实例
2018/03/19 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
一份比较全的PHP面试题
2016/07/29 面试题
物业管理求职自荐信
2013/09/25 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
晚会闭幕词
2015/01/28 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
Python自动化爬取天眼查数据的实现
2021/06/15 Python
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang