你可能会很好奇 ：“ 啊在刚开始学习 jQuery 的时候我记得不是学到过一个什么什么迭代吗？哦对是隐式迭代，那个不就是遍历的简单操作嘛，那为什么还要学习遍历呢？？？”
文章目录：
扫描二维码关注公众号，回复：
14124447 查看本文章
一：遍历元素 each( )
1.1 each( ) 的使用语法：
$( 'ele' ).each( function( index , element ) { xxx } )
- each 方法参数为一个回调函数，函数里面有两个参数，第一个参数 index 代表获取的相同元素的索引值（该方法会自动给目标元素设置索引值，不需要手动添加），第二个参数 element 为遍历到的内容
- 注意！！：遍历到的 element 为 DOM 元素，不能使用 jQuery 的样式操作方法，要转为jQuery 元素才能使用！
1.2 each( ) 的使用方法举例：
此处我们举一个例子来更生动解释其用法，例如我们有三个 div 标签，我们要分别给三个 div 的背景设置不同的颜色，我们该如何操作，首先我们可以设置一个数组里面存放好要设置的三个颜色，再用 each() 去遍历
<body>
<div>111</div>
<div>222</div>
<div>333</div>
<script>
arr=['red','pink','green']
$('div').each(function(index,element){
$(element).css('backgroundColor',arr[index]) //要将element转换为jQuery对象才能使用css方法
})
</script>
</body>结果输出：
分别设置了不同的背景颜色
二：遍历元素 $.each( )
2.1 $.each( ) 的使用语法：
$.each( $( 'ele' ) , function( index ,element ){xxxx} )
- $.each() 可以遍历任何形式，数组，对象均可遍历，所以如果选择遍历数据我们选择这个方法，其方法的参数有两个，第一个参数为要操作的元素，第二个参数为回调函数，函数里面仍然是两个参数，第一个参数 index 代表获取的相同元素的索引值（该方法会自动给目标元素设置索引值，不需要手动添加），第二个参数 element 为遍历到的内容
- 注意！！：遍历到的 element 为 DOM 元素，不能使用 jQuery 的样式操作方法，要转为jQuery 元素才能使用！
2.2 $.each( ) 的使用方法举例：
第一个例子 遍历数组：
<script>
arr=['red','pink','green']
$.each(arr,function(index,element){
console.log(index);
console.log(element);
})
</script>
第二个例子 遍历对象：
这个案例类似于 for in 遍历对象，分别输出了键与值
<script>
$.each({
name:'张三',
age:18
},function(index,element){
console.log(index); //输出属性名
console.log(element); //输出属性值
})
</script>
三：小结
综上所述：
- 如果我们想要遍历操作DOM元素，我们推荐使用 each( )
- 如果想要遍历数据，例如对象，数组等等，我们推荐使用 $.each( )