目录

一、jQuery中$.each()的几种常用方法

1、利用$.each()处理一维数组

2、利用$.each()处理二维数组

3、利用$.each()处理json数据

4、利用$.each()处理dom元素

二、情景代码实现

首先，我们设定一种情景。div下有三层ul，每个ul中都有三个li标签。利用json数组给所有的li标签赋值，这个问题用for循环也许更简单，但是增到难度，我们用each()函数来进行描述。对于我来说，只知道$.each(json数组名，function(index,item)),而且连这一句中的参数都不知道什么意思，所以深扒了一下jQuery中$.each()的几种常用方法（听说阿里、腾讯、美团的面试题都会出），实现了上述情景。

一、jQuery中$.each()的几种常用方法

1、利用$.each()处理一维数组

	//处理一维数组
	var arr1 = ["aaa", "bbb", "ccc"];
	$.each(arr1, function(i, val) {
		console.log(i + val);
	});

2、利用$.each()处理二维数组

//处理二维数组
var arr2 = [
	['a', 'aa', 'aaa'],
	['b', 'bb', 'bbb'],
	['c', 'cc', 'ccc']
];
    $.each(arr2, function(i, item) {
	    console.log(i + "====" + item);
		$.each(item, function(j, val) {
		console.log(j + "====" + val)
    });
});

3、利用$.each()处理json数据

//处理json数据
var obj = {
	one: 1,
	two: 2,
	three: 3
};
$.each(obj, function(key, val) {
	console.log(key + "===" + val)
})

4、利用$.each()处理dom元素

//处理dom元素
$.each($("input:hidden"), function(i, val) {
	console.log("i===" + i)
	console.log(val.name)
	console.log(val.value)
})

二、情景代码实现

情景中要实现的效果，其实就是上述四种情况中的后两种方法的混合版本，到底如何才能做到数据赋值不乱不重呢？举个例子：

//json数组
var brands = [
    {brandname:'佳能',number:30440},
    {brandname:'尼康',number:17821},
    {brandname:'其它品牌相机',number:7275},
    {brandname:'索尼',number:27220},
    {brandname:'松下',number:12289},
    {brandname:'三星',number:20808},
    {brandname:'卡西欧',number:8242}
]

$.each(brands,function (index,item) {//遍历数组
       $.each($('li'),function (i) {//遍历Li标签
           if(index === i){//'==='会自动判断数据类型是否一致
               $(this).text('('+item.number+')');
               var a = $('<a></a>')
                   .attr('href','#')
                   .text(item.brandname);
               a.css('text-decoration','none');
               $('a:link').css('color','blue');
               $(this).prepend(a);
           }
       })
    })

这样，json数组中的数据就赋值给了ul中的所有li标签，而且不重不漏不乱！