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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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
PHP5 面向对象(学习记录)
2009/12/02 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
纯php生成随机密码
2015/10/30 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Python实现括号匹配方法详解
2020/02/10 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
2014年党建工作汇报材料
2014/10/27 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
新员工试用期自我评价
2015/03/10 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers