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

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

比如 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. Sql server 查询数据库中包含某字段的所有的表

    我们有时候会需要查询数据库中包含某字段的所有的表,去进行update,这时就可以用下面的SQL来实现: select object_name(id) objName,Name as colName f ...

  2. php foreach 报 “Cannot create references to elements of a temporary array expression”

    今天在项目中用php foreach数据库查询结果时,为了方便没有判断数据是否存在,直接用(array)强制转换数据时,刚开始网页始终打不开,就报502,一头懵,突然间php报“Cannot crea ...

  3. 立即抢注我的免费1T云空间

    立即抢注我的免费1T云空间 在IDC行业中,有许多的免费空间,而真正的免费空间又能有多少?我是一个草根站长,说实话,为了寻找一个很好的免费空间,我在网上找了好多,几乎所有的免费空间都用过,但当网站运行 ...

  4. [翻译] HTKDragAndDropCollectionViewLayout

    HTKDragAndDropCollectionViewLayout Custom UICollectionViewLayout that works together with a custom U ...

  5. windows系统镜像 微软官方资源便捷下载教程

    今天跟小师弟学到了一个下载软件的好办法,省得到各种网站下载带有病毒,插件的资源. 这个神奇的网站叫做   MSDN, 我告诉你,这是一个私人维护的网站,里面有各种官方软件的下载地址.可以直接用下载工具 ...

  6. Modal实现页面跳转和控制器数据传递

    一．Model跳转的实现 1.新建工程 2.新建View控制器和导航控制器 (1)为拖控件,两个view一个navigation; 如图: (2)view的“GotoTwo”按键添加Segues到Na ...

  7. FRM一级备考感想

    作为金融小白,工作四年多,边边角角有了些许的最直观认识,决定深入了解下金融相关123. 曾经尝试CFA失败,转战FRM安慰下失败的灵魂. 2018.11.17 FRM Part I 考试结束,自7月初 ...

  8. java的四舍五入

    四舍五入是我们小学的数学问题,这个问题对于我们程序猿来说就类似于1到10的加减乘除那么简单了.在讲解之间我们先看如下一个经典的案例: public static void main(String[] ...

  9. oracle优化脚本

    oracle优化脚本 --查看PGA的最佳设计建议SQL语句select PGA_TARGET_FOR_ESTIMATE / 1024 / 1024 PGAMB,       PGA_TARGET_F ...

  10. ZCMU 2177 Lucky Numbers (easy)

    传送门: http://acm.zcmu.edu.cn/JudgeOnline/problem.php?id=2177 2177: Lucky Numbers (easy) 时间限制: 2 Sec   ...