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

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

比如 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>

内容均打印在控制台

Every day is wonderful ！

JQuery 同时获取多个标签的指定内容并储存为数组的更多相关文章

  1. 关于jquery html()方法获取带有OBJECT标签的元素内容时，出现“类型不匹配。”的解决办法

    关于jquery html()方法获取带有OBJECT标签的元素内容时,出现“类型不匹配.”的解决办法 解决办法: $("selector").clone().html()

  2. Asp.Net正则获取页面a标签里的内容

    Asp.Net正则获取页面a标签里的内容 string url = "http://www.114369.com"; string html = MyCLib.NetClass.S ...

  3. [jQuery] jQuery如何获取同一个类标签的所有的值

    碰巧在开发的时候遇到这个问题,因为jQuery总是只返回第一个类标签的值,所以无法达到我们的要求. 比如: var btn = jQuery('.btn').val(); 获取的只是第一个类标签为bt ...

  4. jQuery -&gt; 获取／设置HTML或TEXT内容

    jQuery提供了两个API能够直接用来为元素加入内容. html() text() 当中html()是为指定的元素加入html内容 text()是为指定的元素加入文本内容 两者的差别在于,text中 ...

  5. jquery遍历获取带checkbox表格的选中值以及遍历json数组

    今天整理了一下jquery遍历的两个用法,分享给大家. 1.$().each 主要用来遍历DOM元素,获取DOM的值或样式等. 2.$.each() 主要用来遍历后台ajax返回的json数组,循环将 ...

  6. js获取多个标签元素的内容，并根据元素的内容修改标签的属性

    <html > <head> <title>无标题文档</title> </head> <body> <div class ...

  7. java正则表达式获取指定HTML标签的指定属性值

    package com.mmq.regex; import java.util.ArrayList; import java.util.List; import java.util.regex.Mat ...

  8. jQuery中获取a标签的值

    如题,一组相同action的a标签,不同的是a标签的内容为搜索内容.点击页面显示不同的数据 刚开始试过在 a标签中添加 value值 和id 的值,结果在jQuery中获取值均失败! 后来发现,根本不 ...

  9. .NET获取Html字符串中指定标签的指定属性的值

    using System.Text; using System.Text.RegularExpressions; //以上为要用到的命名空间 /// <summary> /// 获取Htm ...

随机推荐

  1. CentOS 7 Apache 多端口部署 Web Apps 指南

    转载自简书,原作者xuyan0,链接https://www.jianshu.com/p/b34c78bf9bf0,如有侵权,请联系删除 导语 Apache web 服务器运行着互联网上超过半数的活跃的 ...

  2. OpenStack 学习笔记 （三）

    个人网站:臭蛋www.choudan.net 一直苦于不知道如何加入到开源社区参与开发,感受开源社区分布式协作开发和巨神们coding的魅力,特意在网上查了资料,直接指导的很少,还得的靠官网上的文档. ...

  3. Layui - Xtree 3.0 http://acmeworker.com/BlogContent?type=1038

    2018年1月11日升级 Layui - Xtree 3.0 此版本包含了前两个版本所有的功能,同时修复了一些问题,增加了一些功能,之前的版本可以直接抛弃啦!本次升级改动较多,参数也有所更改,尽量别直 ...

  4. 省钱小贴士（ECS）：教你如何每年省出8w+ 块

    随着用户越来越多地使用阿里云的ECS服务,如何用最小的成本来保有ECS,成为用户越来越重要的关注点. 变更点 为了更好的服务客户,ECS团队调整了系统盘的最小容量限制 linux系统 core os调 ...

  5. metasploit 渗透测试笔记(基础篇)

    0x00 背景 笔记在kali linux(32bit)环境下完成,涵盖了笔者对于metasploit 框架的认识.理解.学习. 这篇为基础篇,并没有太多技巧性的东西,但还是请大家认真看啦. 如果在阅 ...

  6. idea 2018激活注册码

    我使用的方法和pycharm激活类似,激活码不同而已pycharm激活步骤链接:可以新建标签打开https://www.cnblogs.com/-nbloser/p/8570648.html idea ...

  7. 6、Node.js 事件循环

    #########################################################################################Node.js 事件循 ...

  8. Mysql中的char与varchar length()与char_length()

    在mysql中,char和varchar都表示字符串类型.但他们存储和检索数据的方式并不相同. 在表结构定义中声明char和varchar类型时,必须指定字符串的长度.也就是该列所能存储多少个字符(不 ...

  9. python不用正则过渡括号

  10. 关于Mysql查询varchar类型错误问题

    因为后台所有表ID都是按照雪花算法生成的18位数字,需要对接到Android,Ios和H5,此时H5会出现字符超长溢出,所以直接把ID改为varchar类型. 如我的一张表ID为varchar(18) ...