JQuery 同时获取多个标签的指定内容并储存为数组
在网页开发中经常会碰到获取同种类型的 标签 的值得问题,比如下面的两种情况.
当需要批量获取同种标签的指定值时,新人就会碰上一点小麻烦.
比如 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() 方法为每个匹配元素规定要运行的函数。
语法
所以我们采用以下方式获取到我们所需要的内容
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 同时获取多个标签的指定内容并储存为数组的更多相关文章
- 关于jquery html()方法获取带有OBJECT标签的元素内容时,出现“类型不匹配。”的解决办法
关于jquery html()方法获取带有OBJECT标签的元素内容时,出现“类型不匹配.”的解决办法 解决办法: $("selector").clone().html()
- Asp.Net正则获取页面a标签里的内容
Asp.Net正则获取页面a标签里的内容 string url = "http://www.114369.com"; string html = MyCLib.NetClass.S ...
- [jQuery] jQuery如何获取同一个类标签的所有的值
碰巧在开发的时候遇到这个问题,因为jQuery总是只返回第一个类标签的值,所以无法达到我们的要求. 比如: var btn = jQuery('.btn').val(); 获取的只是第一个类标签为bt ...
- jQuery -> 获取/设置HTML或TEXT内容
jQuery提供了两个API能够直接用来为元素加入内容. html() text() 当中html()是为指定的元素加入html内容 text()是为指定的元素加入文本内容 两者的差别在于,text中 ...
- jquery遍历获取带checkbox表格的选中值以及遍历json数组
今天整理了一下jquery遍历的两个用法,分享给大家. 1.$().each 主要用来遍历DOM元素,获取DOM的值或样式等. 2.$.each() 主要用来遍历后台ajax返回的json数组,循环将 ...
- js获取多个标签元素的内容,并根据元素的内容修改标签的属性
<html > <head> <title>无标题文档</title> </head> <body> <div class ...
- java正则表达式获取指定HTML标签的指定属性值
package com.mmq.regex; import java.util.ArrayList; import java.util.List; import java.util.regex.Mat ...
- jQuery中获取a标签的值
如题,一组相同action的a标签,不同的是a标签的内容为搜索内容.点击页面显示不同的数据 刚开始试过在 a标签中添加 value值 和id 的值,结果在jQuery中获取值均失败! 后来发现,根本不 ...
- .NET获取Html字符串中指定标签的指定属性的值
using System.Text; using System.Text.RegularExpressions; //以上为要用到的命名空间 /// <summary> /// 获取Htm ...
随机推荐
- IEC62304开发过程框架
软件开发计划的任务 制定整体软件开发计划 制定设计和开发计划 规划软件开发的工具.标准和方法(Class C) 制定软件集成和集成计划 制定软件验证计划 制定软件风险管理计划 制定配置管理计划 软件需 ...
- 移动端tap事件的封装
/*封装tap*/ cc.tap = function(dom,callback){ /* * 要求 没有触发 touchmove 事件 * 并且响应速度要比click快 */ if(dom & ...
- js构建类的方法
Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class.(不过,ES6引入了Class这个概念,作为对 ...
- nginx部署及简单优化
研究nginx优化时反复安装清理nginx,为方便做了一个简单部署脚本,用的最新稳定版1.14.0,默认路径,加入systemd系统进程管理中,可以通过systemd管理nginx的启动.终止.重载. ...
- 数组list操作,切片
a=range(10) a[11:0:-1] #倒序输出 a[0:9:2] #输出2,4,6,8 a[-3:] #输出7,8,9 a.append(11) #追加一个元素 a.count(11) #统 ...
- FDFDF
Linux(Centos)之安装Nginx及注意事项 1.Nginx的简单说明 a. Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器,期初开发的目的 ...
- 一些实用的adb命令
一.前提: 1.打开手机调试模式,确保手机已正常连接电脑,可在电脑上通过adb devices命令查看,结果如下说明连接成功: List of devices attached90xxxxc9 dev ...
- Python学习---Model拾遗[1]180318
Model: 强大的数据库操作,弱小的数据验证 Form: 强大的数据验证 ModelForm: 强大的数据验证 + 弱小的数据库操作 Model拾遗 Model基本操作 1. 创建数据库表2. 修 ...
- C#网络编程(二)应用篇
(一)TcpListen类.TcpClient类 TcpListener类和TcpClient类都是System.Net.Sockets命名空间下的类,利用TcpListener和TcpClient可 ...
- phpMyAdmin提示“无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装。”
这是以前学生在使用phpwamp时遇到的一个问题(其他环境或是自己搭建时遇到此问题,解决方式同理) 其实这个问题与PHPWAMP本身无关,是电脑设置的问题,一般正常情况下不会出现这个问题. 现在把学生 ...