JQuery中$.each 和$(selector).each()的区别详解

Posted 2021-02-07 libin6505

JQuery中$.each 和$(selector).each()的区别详解

 

目录

?? 1、$(selector).each()
?? 2、$.each()

 1、$(selector).each()

jQuery 遍历 - each() 方法主要用于DOM遍历，

each() 方法规定为每个匹配元素规定运行的函数。

语法：

$(selector).each(function(index,element))

 

W3School上显示回调函数是必须的，index - 选择器的 index 位置，element - 当前的元素（也可使用 "this" 选择器）.

对于这个方法，在dom处理上面用的较多。

如果页面有多个input标签类型为checkbox，对于这时用$().each来处理多个checkbook，例如：

$(“input[name=’ch’]”).each(function(i){
    if($(this).attr(‘checked’)==true) {
        //一些操作代码
    }
})

回调函数是可以传递参数，i 就为遍历的索引。

 

 2、$.each()

在数组等数据处理上比较好用

对于jQuery对象，只是把each方法简单的进行了委托：把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说：jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。

each()函数是基本上所有的框架都提供了的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理。jQuery和jQuery对象都实 现了该方法，对于jQuery对象，只是把each方法简单的进行了委托：把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说：jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用。

each函数根据参数的类型实现的效果不完全一致：

 

1、遍历对象(有附加参数)：

$.each(Object, function(p1, p2) {
      this;       //这里的this指向每次遍历中Object的当前属性值
      p1; p2;     //访问附加参数
 }, [‘参数1‘, ‘参数2‘]);
 

 

2、遍历数组(有附件参数)：

$.each(Array, function(p1, p2){
      this;       //这里的this指向每次遍历中Array的当前元素
      p1; p2;     //访问附加参数
 }, [‘参数1‘, ‘参数2‘]);
 

 

3、遍历对象(没有附加参数)

$.each(Object, function(name, value) {
      this;      //this指向当前属性的值
      name;      //name表示Object当前属性的名称
      value;     //value表示Object当前属性的值
 });

 

4、遍历数组(没有附加参数)

 $.each(Array, function(i, value) {
       this;      //this指向当前元素
       i;         //i表示Array当前下标
       value;     //value表示Array当前元素
  });
  

 

下面提一下jQuery的each方法的几种常用的用法实例：

        
        var arr = ["one", "two", "three", "four"];
        
        $.each(arr, function() {
            alert(this);
        }); 
        //上面这个each输出的结果分别为：one,two,three,four 
// -------------------------------------------------------
            
        var arr1 = [
            [1, 4, 3],
            [4, 6, 6],
            [7, 20, 9]
        ]
        
        $.each(arr1, function(i, item) {
            alert(item[0]);
        }); 
        //其实arr1为一个二维数组，item相当于取每一个一维数组，  
        //item[0]相对于取每一个一维数组里的第一个值  
        //所以上面这个each输出分别为：1 4 7     
// -------------------------------------------------------        
        
        var obj = {
            one: 1,
            two: 2,
            three: 3,
            four: 4
        };
        
        $.each(obj, function(key, val) {
            alert(obj[key]);
        }); 
        //这个each就有更厉害了，能循环每一个属性  
        //输出结果为：1 2 3 4
// -------------------------------------------------------