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

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

比如 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. ESP8266调试记录

    1.引脚图:使用STM32F103ZET6芯片的串口1  PA9-TX //PA10-RX(该串口挂载到APB2总线时钟)然后分别连接模块的RX和TX,供电使用3.3v(供电一定要稳)但不能超过5v ...

  2. WebAPI应用问题整理

    这两天在实现一个WebAPI的服务过程中遇到了下面的一些问题 1, 一个Controller中添加多个Action 基于模板创建WebAPI项目后,项目中会自动生成一个ValueController的 ...

  3. winform界面开发-HTML内容编辑控件

    参照及推荐博客:伍华聪 http://www.cnblogs.com/wuhuacong/archive/2009/07/07/1518346.html http://www.cnblogs.com/ ...

  4. SSH 无法启动的原因分析及解决方法

    简介 Secure Shell(缩写为 SSH),由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为一项创建在应用层和传输层基础上的安全协议,为计算机上的 S ...

  5. 使用MDScratchImageView实现刮奖效果

    使用MDScratchImageView实现刮奖效果 https://github.com/moqod/iOS-Scratch-n-See 最终效果: 其实这是使用了别人的东西而已:) 源码: // ...

  6. 使用FontAwesome

    使用FontAwesome https://github.com/PrideChung/FontAwesomeKit 为什么要使用FontAwesome呢,其实,它的字体就是矢量图,无论是放大还是缩小 ...

  7. CentOS安装和部署SVN服务器

    1.安装SVN 通过yum安装svn [root@localhost webber]# yum install subversion 查看svn是否安装成功 [root@localhost webbe ...

  8. 数据库连接池及并发库Theron

  9. PhoneGap 加速计 api 获取加速计 x 轴 y 轴 z 轴信息

    一.PhoneGap 加速计 Accelerometer 对象介绍 1.主要方法 accelerometer.getCurrentAcceleration 获取当前设备在 x,y,z 轴上的加速度信息 ...

  10. BZOJ 3211 花神游历各国 线段树平方开根

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=3211 题目大意: 思路: 由于数据范围只有1e9,一个数字x开根号次数超过logx之后 ...