Jquery使用$.each()遍历json\数组和对象

  •   
  • 3937
  • jQuery
  • 5
  • super_dodo
  • 2013/11/22

通过 $.each()方法,此方法可用于例遍任何对象。

回调函数拥有两个参数:
第一个为对象的成员或数组的索引
第二个为对应变量或内容

如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略

<div id="show"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
$(function(){ 
	//例遍数组,同时使用元素索引和内容
	$.each([0,1,2], function(index, content){
		alert("数组的索引是:#" + index + "---数组的值是:" + content );
	});

	//遍历数组
	var testPatterns = ['yyyy','yy','MMMM','MMM','MM','M'];
	$.each(testPatterns,function(){
		$("#show").append('<div>'+this+'</div>');
	});

	//遍历对象,同时使用成员名称和变量内容
	$.each({ name:"John",lang:"JS"}, function(index,content){
		alert( "对象的属性名是:" + index + "---对象属性值是:" + content );
	});

	//$json为PHP变量,是JSON格式的 此处不需要加双引号(神奇吧)
	//var json = <?php echo $json; ?> 
	
	//例遍对象数组,同时使用成员变量内容
	var json =[{name:"John",lang:"JS"},{name:"dodobook",lang:"Jquery"},{name:"小杜",lang:"PHP"}];
	$.each(json,function(index,content){
		alert("学生的No是:" + index + "---名字是:"+ content.name +"---课程是:" + content.lang );
	});


       //附加的方法(衍生)--当aa选项框变化时对bb选项的变更ajax
	$('#aa').change(function(){
		$("#bb").html('');		//清空IP段选项组
		var aa = $('#aa').val();
		$.getJSON('/api/getBbByAa',{aa:aa},function(data){
			$("#bb").html(data);	//附加数据(data为json的option组)
		});
	});
	
});