用jquery的each方法介绍及遍历json对象

最新推荐文章于 2020-12-09 16:49:10 发布
最新推荐文章于 2020-12-09 16:49:10 发布
阅读量2.1w 收藏 16
点赞数 5
分类专栏： 数据循环
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daimomo000/article/details/53925741
版权

jquery的each方法：

each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等
在javaScript开发过程中使用$each可以大大的减轻我们的工作量。

下面简单介绍一下each的几种常用方法

each处理一维数组：

   var  arr1  =  [  " aaa " ,  " bbb " ,  " ccc "  ];      
  $.each(arr1,  function (i,val){      
      alert(i);  
      alert(val);
  });   
alert(i)将输出0，1，2
alert(val)将输出aaa，bbb，ccc

each处理二维数组  
　　 var  arr2  =  [[ ' a ' ,  ' aa ' ,  ' aaa ' ], [ ' b ' ,  ' bb ' ,  ' bbb ' ], [ ' c ' ,  ' cc ' ,  ' ccc ' ]]      
　　 $.each(arr,  function (i, item){      
      alert(i);   
      alert(item);      
　　 });  
arr2为一个二维数组，item相当于取这二维数组中的每一个数组。
item[0]相对于取每一个一维数组里的第一个值   
alert(i)将输出为0，1，2，因为这二维数组含有3个数组元素
alert(item)将输出为  ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']

 

对此二位数组的处理稍作变更之后

  var  arr  =  [[ ' a ' ,  ' aa ' ,  ' aaa ' ], [ ' b ' ,  ' bb ' ,  ' bbb ' ], [ ' c ' ,  ' cc ' ,  ' ccc ' ]]      
 　　$.each(arr,  function (i, item){      
      　　$.each(item, function (j,val){
       　　　　 alert(j);
        　　　　alert(val);
    　}); 
});    
 alert(j)将输出为0，1，2，0，1，2，0，1，2
 alert(val)将输出为a，aa，aaa，b，bb，bbb，c，cc，ccc

 

 

 each处理json数据，这个each就有更厉害了，能循环每一个属性     
 　　 var  obj  =  { one: 1 , two: 2 , three: 3 };      
 　　 each(obj,  function (key, val) {      
      　　 alert(key);   
      　　 alert(val);      
 　　 });   
这里alert(key)将输出one two three
alert(val)将输出one，1，two，2，three,3
这边为何key不是数字而是属性呢，因为json格式内是一组无序的属性-值，既然无序，又何来数字呢。
而这个val等同于obj[key]

 

ecah处理dom元素，此处以一个input表单元素作为例子。

如果你dom中有一段这样的代码
<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden"  value="444"/>
然后你使用each如下
 $.each($("input:hidden"), function(i,val){  
     alert(val);
     alert(i);
     alert(val.name);
     alert(val.value);   
 });  
那么，alert(val)将输出[object HTMLInputElement]，因为它是一个表单元素。   

alert(i)将输出为0，1，2，3 

alert(val.name);将输出aaa,bbb,ccc,ddd，如果使用this.name将输出同样的结果
alert(val.value);  将输出111,222,333,444，如果使用this.value将输出同样的结果

 

如果将以上面一段代码改变成如下的形式  

$( " input:hidden " ).each( function (i,val){
    alert(i);
    alert(val .name);
    alert(val .value);       
});



用each()方法遍历json对象：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="bootstrap.min.css">
	<script src="jquery-1.11.0.min.js"></script>
	<style>
	.col-center-block{
		margin:20px auto;
		float: none;
		display: block;
	}
	</style>
</head>
<body>
	
<div class="panel-body col-md-6 col-center-block">
	<table id="table" class="table text-center">
		<thead>
			<tr>
				<th class="text-center">姓名</th>
				<th class="text-center">分数</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>
	
</body>
<script type="text/javascript">
var jsonStu=[{"name":"张三","score":"85"},{"name":"李四","score":"78"},{"name":"王五","score":"90"}];

$(function(){
	var con="";
	$.each(jsonStu,function(i,data){
		con+="<tr><td>"+data.name+"</td><td>"+data.score+"</td></tr>"
	});
	$("#table tbody").html(con);
})
</script>
</html>

<html>
<head>
<title>jQuery遍历json</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<script>
 var a = {
  "sys_bb": [
  {
   "menu_name": "教务处",
   "menus": [
    {
     "menu_name": "张明"
    },
    {
     "menu_name": "王明"
    }
   ]
  },
  {
   "menu_name": "办公室",
   "menus": [
    {
     "menu_name": "刘处"
    },
    {
     "menu_name": "小王"
    },
    {
     "menu_name": "张三"
    }
   ]
  }
 ],
  "sys_cw": [
  {
   "menu_name": "财务处",
   "menus": [
    {
     "menu_name": "王虎"
    }
   ]
  }
 ]
 };
 $(function () {
  $.each(a.sys_bb, function (i, n) {
   $("#Div").append(a.sys_bb[i].menu_name + "<br>");
   $.each(a.sys_bb[i].menus, function (i, n) {
    $("#Div").append(" " + n.menu_name + "<br>");
   });
  });
  $.each(a.sys_cw, function (i, n) {
   $("#Div").append(a.sys_cw[i].menu_name + "<br>");
   $.each(a.sys_cw[i].menus, function (i, n) {
    $("#Div").append(" " + n.menu_name + "<br>")
   });
  });
 });
</script>
<body>
<div id="Div">
</div>
</body>
</html>


lucky芬
关注
  • 5
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery使用each方法遍历json格式数据实例
10-24
jQuery的$.each()方法是一个非常有用的函数，可以用来遍历数组或对象。在处理JSON格式数据时，$.each()方法是一个有效的工具，因为它允许开发者对JSON对象或数组中的每个元素执行操作。 JSON（JavaScript Object ...
javascript中的each遍历!
weixin_33853827的博客
07-16 790
1.数组中的each var arr = [ "one", "two", "three", "four"]; $.each(arr, function(){ alert(this); }); //上面这个each输出的结果分别为：one,two,three,four var arr1 = [[1, 4, 3], [4, ...
jquery的each()详细介绍
weixin_30902675的博客
11-21 881
each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量。下面提一下each的几种常用的用法 each处理一维数组 vararr1=["aaa","bbb","ccc"];...
JS中遍历函数each的实现
boss2967的博客
08-16 1069
js中遍历函数操作经常使用到, 遍历就是对数据集合内元素进行某个操作, 因为是对集合内每个元素都进行指定操作, 故称遍历,  数据集合, 我们想到最常用的就是数组; 指定的操作,可以有多样, 最常用的就是利用一个函数来指定所进行的操作; 那么如果以数据集合, 和指定的操作作为某个 [ 即 each ] 函数的参数, 即可对数据集合内每个元素进行指定的操作, 下面看看其实现过程:
原生js实现each方法
永恒的避风港
03-27 1639
jquery里面有个each方法，将循环操作简化、便捷。 随后es出了个forEach方法，两个虽然用法相近，但是不能处理对象类型。且无法通过return true达到continue效果。 此外还有个every方法，该方法虽然可以实现continue效果，但是在处理类数组与对象类型时，完全无用。 在不使用jquery的each方法时，该如何处理；或者说用原生如何来实现？ 前些前写了个类库: ...
JS中的$().each
qq_38642745的博客
03-14 6026
JS中的$().each var dn_doc_no = “”; //判断是否有勾选item KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲docCenter input…(this).attr(“checked”) == ‘checked’ &amp;&amp; $(this).val() != ‘on’) { doc...
jQuery使用$.each遍历json数组的简单实现方法
10-22
通过上述内容的介绍和分析，开发者可以更加熟练地使用jQuery的$.each方法来遍历JSON数组和对象。这不仅增强了代码的可读性和可维护性，而且还能够灵活地处理各种数据结构。掌握$each方法是编写高效jQuery代码的重要...
jquery遍历json对象集合详解
10-22
在jQuery中，遍历JSON对象集合最常用的方法是使用$.each()函数。这个函数可以接受一个数组或对象，并且可以定义一个回调函数来处理集合中的每一个元素。对于遍历JSON对象，通常需要将JSON字符串先转换为JavaScript...
js each函数 的使用
青梅煮酒论英雄的博客
02-27 2945
使用场景1. $().each() 当存在多个相同的class元素，元素是不固定的，并且要给他们增加点击事件 $(".tip").each(function (index) { $(this).on("click", function () { //循环给每个元素增加背...
js中each函数的用法
angou1937的博客
04-11 1644
官方说明： jQuery.each(object, [callback])概述通用例遍方法，可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。参数objectOb...
javascript中的each
艾斯博弈
11-20 1163
jQuery.each(object, [callback]) 概述 通用例遍方法，可用于例遍对象和数组。 不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。 参数 objec
js 的each()方法遍历对象和数组
weixin_34162629的博客
01-04 142
<script src="../lib/jquery-1.8.3.min.js" ></script> <script type="text/javascript" charset="utf-8"> var arr = ["a", "b", "c", "d", "e"]; var obj = { a: 'one', b: 'two', c: 'th...
javascript中的each遍历
qq_40603010的博客
09-17 6419
javascript中的each遍历 each的用法 1.数组中的each var arr = [ "one", "two", "three", "four"]; $.each(arr, function(){ alert(this); }); //上面这个each输出的结果分别为：one,two,three,four var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]] $.each(arr1, funct
js和jQuery的each方法区别
weixin_46429290的博客
11-29 134
js和jQuery的each方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>map遍历</title> <script src="js/jquery-1.12.4.js"></script> <script> var arr=[1,2,3,4,5]; var obj={1:2,3:4,5:6,7
原生JS优化each函数
flying meng的菜鸟居
01-15 680
each —— 算是JavaScript中的一个“语法糖”API了。它的作用是“遍历数组/对象中的每一个元素/属性，操作想要操作的事情（执行回调函数）”。 其中在jQuery中使用的尤其广泛： var arr=[1,2,3,4]; $.each(arr,function(i,v){ console.log(i+", "+v); if(i===2){ return false; } })...
前端代码|循环遍历数组函数： js forEach()、map() 、for...of || jQuery each() 定义、语法、示例详解
wj的博客
12-09 2917
文章目录JavaScript forEach() 方法1. 定义和用法：注意:2. 语法：参数：3. 返回值：undefined4. 示例：jQuery 遍历 - each() 方法1. 定义和用法：2. 语法3. 示例3.1 $(selector).each(function(index,element)) 函数示例：3.2 $.each(dataresource,function(index,element)) 函数示例：JavaScript Array map() 方法1. 定义和用法注意：2. 语法
jquery 遍历json对象
最新发布
03-18
要遍历JSON对象，可以使用`$.each()`方法或`$.map()`方法。下面是它们的介绍： 1. 使用`$.each()`方法： `$.each()`方法用于遍历数组或对象。对于JSON对象，可以将其作为参数传递给`$.each()`方法，并在回调函数中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值