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   age
      console.log(value);  // linda   12
    })
  })
</script>

总结

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