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获取radio选中的值
May 05 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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中isset()和unset()函数的用法小结
2014/03/11 PHP
php多重接口的实现方法
2015/06/20 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
基于php实现的验证码小程序
2016/12/13 PHP
JavaScript 面向对象与原型
2015/04/10 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python中字典映射类型的学习教程
2015/08/20 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
对numpy中shape的深入理解
2018/06/15 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
python实现键盘输入的实操方法
2019/07/16 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
竞争上岗演讲稿范文
2014/05/12 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
董事长新年致辞
2015/07/29 职场文书
创业计划书之水果店
2019/07/18 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
vue判断按钮是否可以点击
2022/04/09 Vue.js