详解Jquery 遍历数组之$().each方法与$.each()方法介绍

概述

$.each()方法和$().each()方法是Jquery提供的两种遍历数组的方法，它们的功能十分相似，主要的区别是$().each()方法是作为Jquery对象的一个方法存在，而$.each()方法是Jquery的一个函数。

任意常用的编程语言都存在遍历数组的方法，对于JavaScript而言，我们可以使用for循环语句去遍历数组，但是使用Jquery提供的$.each()方法和$().each()方法，可以不仅简化操作，还可以降低一些错误的出现概率。

$().each()方法

$().each()方法是Jquery提供的一种遍历操作的方法，其中，$()表示选择器，用来选择Jquery对象。

语法格式如下：

$(selector).each(function(index,element){
    //handler
})

其中，参数selector是Jquery获取元素的选择器，function是一个回调函数，用来处理遍历过程中的元素，参数index表示当前遍历到元素在数组中的下标，参数element表示当前遍历到的元素。

下面是一个简单的例子：

<ul>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>HTML</li>
    <li>CSS</li>
</ul>

$("li").each(function(index,element){
    console.log(index,element.innerHTML);
})

运行结果为：

0 "JavaScript"
1 "jQuery"
2 "HTML"
3 "CSS"

$.each()方法

$.each()方法是Jquery提供的遍历数组的方法，它可以遍历任何可遍历的数据类型，比如数组、对象等等。语法格式如下：

$.each(arr,function(index,element){
    //handler
})

其中，arr表示需要遍历的数组，function是一个回调函数，用来处理遍历过程中的元素，参数index表示当前遍历到元素在数组中的下标，参数element表示当前遍历到的元素。

下面是一个简单的例子：

var arr = [1,2,3,4];
$.each(arr,function(index,element){
    console.log(index,element);
})

运行结果为：

0 1
1 2
2 3
3 4

思考一下，如果使用传统的for循环语句去遍历上面的数组，代码会有多长？而使用Jquery提供的方法，只需要几行简单的代码就可以轻松完成任务了。

示例说明

示例一：$().each()方法遍历表单元素

下面是一个HTML表单：

<form>
  <div>
    <label for="name">姓名</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label for="email">邮箱</label>
    <input type="email" id="email" name="email">
  </div>
  <div>
    <label for="age">年龄</label>
    <input type="number" id="age" name="age">
  </div>
</form>

我们可以使用$().each()方法去遍历所有的表单元素，用Jquery给每一个表单元素绑定一个事件：

$("input").each(function(index,element){
    $(element).on("focus",function(){
        console.log("focus on "+element.name);
    })
})

当表单元素被选中时，控制台会输出当前元素的name属性值。

示例二：$.each()方法遍历JSON对象

下面是一个JSON数据：

var json = {
    "name":"Tom",
    "age":18,
    "score":[1,2,3,4,5]
}

我们可以使用$.each()方法去遍历整个JSON对象，获取其中的属性：

$.each(json,function(key,value){
    console.log(key,value);
})

运行结果为：

name "Tom"
age 18
score [1, 2, 3, 4, 5]

可以看到，$.each()方法不仅可以遍历数组，也可以遍历对象。这是传统的for-in语句所不具备的优势。

总结

Jquery的$().each()方法和$.each()方法是两种遍历数组的常用方法，它们可以简化代码，降低错误概率，具备强大的功能灵活性。我们在开发中，要灵活运用这两种方法，提高开发及工作效率。