JQuery 学习—$.each遍历学习

大家好，又见面了，我是全栈君。

生活在这样一个充满欢乐的世界中，我们要有欢乐的精神对待工作和生活！
我们每天晚上睡觉早上起来，每天会重复着做很多的事情，我们的生活在程序的角度看其实就是一个循环，这个循环说简单它就简单，说复杂它就很复杂。今天我要用欢乐的方式来介绍的是JQuery的中的一种技术，JQuery 的$.each遍历操作，不管是搞前端还是搞后端javaWeb方向的程序员（猿），你一定会和它偶遇，在某一个转角。
在通往技术的道路上，一定会听到很多流言蜚语，但是我们一定要坚定自己的信念那就是找到一座灯塔，那个灯塔在我们迷茫徘徊的时候可以指引我们朝着正确的方向，那么在技术中指引我们的灯塔是什么呢？那一定是 官方的文档。
1：文档说明

.each( function(index, Element) ) 返回: jQuery
描述: 遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each( function(index, Element) ) function(index, Element) 类型: Function() 每个匹配元素执行的一个函数。 .each() 方法用来让DOM循环结构更简单更不易出错。 它会迭代jQuery对象中的每一个DOM元素。 每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。 更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。

假设页面上有这样一个简单的无序列表。

<ul>
    <li>foo</li>
    <li>bar</li>
</ul>

你可以选中并迭代这些列表：

$( "li" ).each(function( index ) {
         console.log( index + ": "" + $(this).text() ); });

列表中每一项会显示在下面的消息中：

0: foo 
1: bar

官方的虽然权威，但是有时候会比较抽象和难以理解，为了调节一下气氛，下面我们用轻松的心情来一起吃这些个栗子。
2：详细举例

1 ：简单的选择器遍历
简单的选择器遍历，就如上面文档中举例所示，其中选择器可以使用页面的元素、class、id等

1、选择器+遍历
$('div').each(function (i){ 
   
   i : 就是索引值
   this : 表示获取遍历每一个dom对象
});
2、选择器+遍历
$('#testId').each(function (index,domEle){ 
   
   index : 就是索引值
  domEle : 表示获取遍历每一个dom对象
});
3、更适用的遍历方法
1）先获取某个集合对象
2）遍历集合对象的每一个元素
var data = $(".testClass");
$.each(data,function (index,domEle){ 
   
  data : 是要遍历的集合
  index : 就是索引值
  domEle : 表示获取遍历每一个dom对象
});

2：数组、对象、json属性值遍历
（1）：数组的遍历操作，包括一维数组和二维数组。

 var array1= [ "王宝强", "陈思成", "好兄弟" ];     //测试一维数组 
  $.each(array, function(index,data){ 
         
       console.log(index + data);
  });   

    输出的结果如下：
    0 王宝强
    1 陈思成
    2 好兄弟

    //二维数组
　　var array2 = [['王宝强', '士兵突击', '宝宝加油'], ['陈思成', '北爱', '宝宝好哥们'], ['娱乐圈', '好复杂', '好混乱']];       
　　$.each(array2, function(index, item){ 
    
    　　//item相当于取这二维数组中的每一个数组
    　　console.log(index + item);
    　　console.log("--" + item[0] + "," +item[1] + ","  + item[2] + "--");
　　}); 
　　输出的结果如下：
    0 ['王宝强', '士兵突击', '宝宝加油']
    --王宝强,士兵突击,宝宝加油--
    1 ['陈思成', '北爱', '宝宝好哥们']
    --陈思成, 北爱, 宝宝好哥们--
    2 ['娱乐圈', '好复杂', '好混乱']
    --娱乐圈, 好复杂, 好混乱--

（2）对象的遍历操作

    var person = {name : "王宝宝", addr: "北京", stoty : "轰动整个娱乐圈"};
    $.each(person ,function(index, data){ 
    
        console.log("Name: " + index + ", Value: " + data); 
    });
    输出的结果如下：
    Name: name, Value: 王宝宝
    Name: addr, Value: 北京
    Name: stoty, Value: 轰动整个娱乐圈

（3）json的遍历操作

var obj = [{ "name": "王宝强", "pwd": "666666"},{ "name": "马蓉", "pwd": "999999"}];
$.each(obj ,function(index, data){ 
    console.log("index: " + index + ", name: " + data.name + ", pwd: " + data.pwd); 
});
    输出结果如下：
    index: 0, name: 王宝强, pwd: 666666
    index: 1, name: 马蓉, pwd: 9999999

吃完栗子，我们应该收收心，做个小小的总结，虽说真正牛逼的人生从来不需要解释，但是在通往牛逼的路上，一定要总结的。
3：总结
JQuery的each遍历在平时开发的项目中用到的还是比较多比较频繁的，不管是在前端，还是在java,php中，这里each的日常使用基本已经介绍了。如需更高深的探索和修炼，请多多看牛人（大神）的技术博客。
4：参考资料
1：JQuery文档
2：jquery的each()详细介绍

最后，我想说：
如果你还有梦想！
如果你还梦想自己的世界会更加精彩！！
如果你还梦想世界因为有你的存在能变得更好一点！！！
那么，请戳这里：极客学院-JQuery系列视频课程

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/121229.html原文链接：https://javaforall.net