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

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

比如 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. Android图片处理--缩放

    PS:在开发中我们会遇到一些图片处理问题,比如说缓存图片了.限制图片大小了.查看图片了等.上一篇文章介绍了图片的全景效果查看,今天介绍一个图片缩放,我们如果有时间的话,可以自己写一个属于自己的库,里面 ...

  2. 代码整洁之道读书笔记（Ch4-Ch7）

    这几章从注释.程序格式.对象与数据结构的规范以及错误处理四个方面介绍了如何使代码变得简洁易懂.不同于上次摘抄的方法,这一次我会结合第一次个人作业的代码进行分析. 第四章  注释 这一章告诉我们,好的注 ...

  3. Apache的主要目录和配置文件详解

    一.Apache 主要配置文件注释Apache的主配置文件:/etc/httpd/conf/httpd.conf默认站点主目录:/var/www/html/Apache服务器的配置信息全部存储在主配置 ...

  4. Oracle案例09——ORA-12154: TNS:could not resolve the connect identifier specified

    DG处理的问题还是蛮多的,但这次遇到一个比较奇葩的事情,表面配置.网络都没啥问题,但主备的同步始终有问题,经过多次调整参数.重新部署问题依旧,最终还是求助mos问题得以解决,现将处理过程记录如下: 一 ...

  5. switch与java

    switch结构可以更好的解决等值判断问题switch 选择结构的语法:switch (表达式){case 常量 1://代码块1:break;case 常量 2://代码块2:break;..... ...

  6. 【Python学习】Python中的数据类型精度问题

    Python真的很神奇...神奇到没有直接的数据类型概念,并且精度可以是任意精度.想当初,第一次接触OI算法时,写得第一个算法就是高精度加法,捣鼓了半天.一切在Python看来,仅仅三行代码即可完成. ...

  7. Windows系统通用安全配置基线

    一:共享账号检查 配置名称:账号分配检查,避免共享账号存在 配置要求: 1.系统需按照实际用户分配账号: 2.根据系统的使用需求,设定不同的账户和账户组,包括管理员用户,数据库用户,审计用户,来宾用户 ...

  8. 沉淀，再出发：PHP的简单使用

    沉淀,再出发:PHP的简单使用 一.前言 关于PHP,笔者在本科的时候就听到了太多太多,可惜虽然看了很多的教材,听到了无数遍,也没有系统性的整理过和学习过这方面的知识,这点无论什么时候想起来都是一种遗 ...

  9. Linq使用技巧及查询示例（一）

    Linq的使用大体分为两种:语句表达式   和  方法 首先,我们要在控制器中定义好context private ApplicationDbContext db = new ApplicationD ...

  10. July 31st 2017 Week 31st Monday

    Elegance is the only beauty that never fades. 优雅是唯一不会褪色的美. Even the most beautiful apperace would be ...