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

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

比如 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. Anjular中的路由配置以及服务等模块的一些基本操作

    1.路由的配置: 在Angular.js中,我们可以根据自己的需求来配置路由,以达到当url中的地址改变时,会跳转不同的页面 <script> //一开始的url:"http:/ ...

  2. XSS防范之Encode（转）

    防范XSS有三道防火墙:数据的输入校验,数据输出Encode,浏览器安全(主要就是CSP),这里主要介绍Encode. #用于XSS防范的Encode 用户防范XSS的Encode主要有三种:Html ...

  3. 自动化测试基础篇--Selenium unittest生成测试报告（HTMLTestRunner）

    如何生成HTMLTestRunner测试报告.接上篇文章,对于unittest框架,运行后,测试结果不便于查看,同时多个case存在的时候,可能会导致case result记录不正确的情况. 为此,引 ...

  4. oracle 帐号scott被锁定 如何解锁

    由于多次输入:账号 密码不对 oracle 帐号scott被锁定 如何解锁: 具体操作步骤如下:C:> sqlplus请输入用户名:sys输入口令:sys as sysdba //注意:在口令这 ...

  5. join语句中on条件与where条件的区别

    大纲:on是在生成连接表的起作用,where是生成连接表之后对连接表再进行过滤 当使用left join时,无论on的条件是否满足,都会返回左表的所有记录,对于满足的条件的记录,两个表对应的记录会连接 ...

  6. Linux ping命令详解

    Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性 基于IMCP协议 常见命令参数 -q 不显示任何传送封包的信息,只显示最后的结果 -n 只输出数值 -R 记录路由过程 ...

  7. 计算机用CMD命令关机建立文件夹 梁华杰

    1:进入CMD BJ 2:关机并取消 3:进入D盘 文件管理 创件文件并删除

  8. linux环境下 C++性能测试工具 gprof + kprof + gprof2dot

    1.gprof 很有名了,google下很多教程 g++ -pg -g  -o test test.cc ./test   //会生成gmon.out gprof ./test > prof.l ...

  9. Linux服务器磁盘空间占满问题

    下面我们一起来看一篇关于Linux服务器磁盘占满问题解决(/dev/sda3 满了),希望碰到此类问题的人能带来帮助.   今天下班某电商技术部leader发现个问题,说他们服务器硬盘满了.把日志文件 ...

  10. ZOJ-3278 8G Island---二分第k大

    题目链接: https://cn.vjudge.net/problem/ZOJ-3278 题目大意: 给出两个数列A和B,长度分别为N,M (1<=N, M<=10^5, 1<=Ai ...