JQ中的each()方法与$.each()函数的使用区别

介绍

jquery里的 each() 是一个强大的遍历工具，用于迭代集合中的元素，并为每个元素执行指定的函数‌。它既可以用于遍历 jQuery对象集合，也可以用于遍历普通的数组或对象。

each()对象遍历

语法： $(selector).each(function(index,element){.....})
用法： 遍历匹配的 jQuery 对象集合，对每个元素执行指定的函数。index 是当前元素的索引 ，element是当前元素。
实例：

 <div class="input-box"><input type="checkbox" name="userInfo" value="1" />用户信息1<br><input type="checkbox" name="userInfo" value="2" />用户信息2<br><input type="checkbox" name="userInfo" value="3" />用户信息3<br><input type="checkbox" name="userInfo" value="4" />用户信息4<br><input type="button" value="提交" id="submitInfo">
</div>
// 这里随便导入了一个在线的jquery，实际项目里可以下载到本地文件进行导入。
<script src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script>
$(document).ready(function() {var arr = new Array();// 点击提交按钮的时候，去获取所有选中的checkbox的信息$('#submitInfo').click(function() {$('[name=userInfo]:checkbox:checked').each(function(index,element) {console.log(index,element);console.log($(this).val())arr.push($(this).val());})console.log(arr)})
})
</script>

$.each() 数组或对象遍历

语法： $.each(collection,function(index,value) {.......}
用法： 遍历数组或对象，对每个元素执行指定的函数。。index 是当前元素的索引或键名 ，value是元素值。
实例：

  // 这里随便导入了一个在线的jquery，实际项目里可以下载到本地文件进行导入。
<script src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script>$(document).ready(function() {var arr = ['linda','lucky','mike'];$.each(arr,function(index,value) {// console.log(index) //0 1 2// console.log(value) // 'linda' 'lucky' 'mike'})var obj = {name: 'linda',age:'12'}$.each(obj,function(index,value) {console.log(index);  //name   ageconsole.log(value);  // linda   12})})
</script>

总结

each()对于这个方法，在 dom 处理上面用的较多。如果页面有多个input 标签类型为checkbox ，对于这时用$().each 来处理比较好。 $.each() 函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象。