JQuery에서 $.each와 $(selector).each()의 차이점에 대한 자세한 설명

PS: 밤에 페이지를 작성하던 중 $.each와 $(selector).each()의 차이점을 발견했습니다. Baidu는 키워드를 검색하고 홈페이지에 이전 경험을 요약하여 게시합니다.

---

1. $(selector).each()

jQuery 순회 - Each() 메서드는 주로 DOM 순회에 사용되며, Each() 메서드는 일치하는 각 요소에 대해 실행할 함수를 지정합니다.

구문: ​​

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

콜백 함수 는 W3School에 표시하는 데 필요합니다. index - 선택기의 인덱스 위치, 요소 - 현재 요소("this" 선택기도 사용할 수 있음)

$ ().each, 이 방법은 DOM 처리에 자주 사용됩니다. 페이지에 체크박스 유형의 입력 태그가 여러 개 있는 경우 $().each를 사용하여 여러 체크북을 처리합니다. 예:

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

콜백 함수는 매개변수를 전달할 수 있으며 i는 순회 인덱스입니다.

2. jquery의 Each()에 대한 자세한 소개

jQuery 객체의 경우 Each 메소드는 간단하게 위임됩니다. 즉, jQuery 객체는 jQuery의 Each 메소드에 첫 번째 매개변수로 전달됩니다. 즉, jQuery Each 메소드는 다음과 같습니다. 제공되는 방법은 매개변수 1에서 제공하는 개체의 모든 하위 요소에 대해 하나씩 메서드를 호출하는 것입니다.

each() 함수는 기본적으로 모든 프레임워크에서 제공하는 도구 함수입니다. 이를 통해 객체와 배열의 속성값을

순회하여 처리할 수 있습니다. jQuery와 jQuery 개체 모두 이 메서드를 구현합니다. jQuery 개체의 경우에는 각 메서드가 간단하게 위임됩니다. 즉, jQuery 개체는 jQuery의 각 메서드에 첫 번째 매개 변수로 전달됩니다. 즉, jQuery에서 제공하는 각 메서드는 의 모든 하위 요소입니다. 매개변수 1에 의해 제공된 객체는 하나씩 호출됩니다. jQuery 객체가 제공하는 각 메소드는 jQuery 내부의 하위 요소를 하나씩 호출합니다. 각 함수의 효과는 매개변수 유형에 따라 완전히 일관되지 않습니다.

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. 배열 탐색(추가 매개변수 없음)

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

다음은 jQuery의 각 메소드의 몇 가지 일반적인 용도입니다.

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

JQuery의 각 함수는 1.3.2 공식 문서에 다음과 같이 설명되어 있습니다.

each(callback) 일치하는 각 요소를 컨텍스트로 사용하여 함수를 실행합니다.

전달된 함수가 실행될 때마다 함수의 this 키워드가 다른 DOM 요소(매번 다른 일치 요소)를 가리킨다는 의미입니다. 또한 함수가 실행될 때마다 일치하는 요소 집합에서 실행 환경인 요소의 위치를 ​​나타내는 숫자 값이 매개 변수(0부터 시작하는 정수)로 함수에 전달됩니다. 'false'를 반환하면 루프가 중지됩니다(일반 루프에서 'break'를 사용하는 것과 같습니다). 다음 루프로 점프하려면 'true'를 반환합니다(일반 루프에서 'continue'를 사용하는 것과 같습니다).

다음 콜백은 요소 순회 시 제공해야 하는 작업을 나타내는 콜백 함수입니다. 아래의 간단한 예부터 시작해 보겠습니다.

두 개의 이미지를 반복하고 src 속성을 설정합니다. 참고: 여기서는 jQuery 객체가 아닌 DOM 객체를 나타냅니다.

HTML 코드:

1 <img/><img/>jQuery 代码: 
2 $("img").each(function(i){ 
3 this.src = "test" + i + ".jpg"; 
4 });

결과: [ , ]

물론, 요소를 탐색할 때, jquery는 사용자 정의 점프 아웃을 허용합니다. 샘플 코드를 참조하십시오. 'return'을 사용하여 각() 루프에서 미리 점프할 수 있습니다.
HTML 코드:

 1 <button>Change colors</button> 
 2 <span></span> 
 3 <p></p> 
 4 <p></p> 
 5 <p></p> 
 6 <p></p> 
 7 <p id="stop">Stop here</p> 
 8 <p></p> 
 9 <p></p> 
10 <p></p>

j쿼리 코드:

1 $("button").click(function(){ 
2 $("p").each(function(index,domEle){ 
3 $(domEle).css("backgroundColor","wheat"); 
4 if($(this).is("#stop")){ 
5 $("span").text("在p块为#"+index+"的地方停止。"); 
6 return false; 
7 } 
8 });

또는 쓰기:

1 $("button").click(function(){ 
2 $("p").each(function(index){ 
3 $(this).css("backgroundColor","wheat"); 
4 if($(this).is("#stop")){ 
5 $("span").text("在p块为#"+index+"的地方停止。"); 
6 return false; 
7 } 
8 });

그림:

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

提示：返回 false 可用于及早停止循环。
语法
$(selector).each(function(index,element))参数 描述
function(index,element) 必需。为每个匹配元素规定运行的函数。
•index - 选择器的 index 位置
•element - 当前的元素（也可使用 "this" 选择器

实例
输出每个 li 元素的文本：

$("button").click(function(){ 
  $("li").each(function(){ 
    alert($(this).text()) 
  }); 
});

实例

jQuery.each=function( obj, fn, args ) { 
  if ( args ) { 
    if ( obj.length == undefined ){ 
       for ( var i in obj ) 
      fn.apply( obj, args ); 
    }else{ 
       for ( var i = 0, ol = obj.length; i < ol; i++ ) { 
         if ( fn.apply( obj, args ) === false ) 
         break; 
       } 
    } 
 } else { 
    if ( obj.length == undefined ) { 
       for ( var i in obj ) 
       fn.call( obj, i, obj ); 
    }else{ 
       for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){} 
       } 
    } 
    return obj; 
}

需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式，这意味着，在你自己的fn的实现中，可以直接采用this指针引用数组或是对象的子元素。

那怎么跳出each呢
jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后，要跳出这个循环。
javascript的跳出循环一般用break.
同事遇到这个问题，下意识 的用了break，想跳出这个循环。结果报错
SyntaxError: unlabeled break must be inside loop or switch
经查，应该用一个
在回调函数里return false即可，大多数jq的方法都是如此的

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。 
返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

该方法同1的最大区别是：fn方法会被逐次不考虑返回值的进行进行。换句话说，obj对象的所有属性都会被fn方法进行调用，即使fn函数返回false。调用传入的参数同1类似。

 

对于遍历一个数组，用$.each()来处理，简直爽到了极点。例如：

$.each([{“name”:”limeng”,”email”:”xfjylimeng”},{“name”:”hehe”,”email”:”xfjylimeng”},function(i,n)
{
alert(“索引:”+i,”对应值为：”+n.name);
});

参数i为遍历索引值，n为当前的遍历对象.

 

var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
});
输出：one   two  three  four   fivevar arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
输出：1   4   7var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});

输出：1 2 3 4 5

 

在jQuery里有一个each方法，用起来非常的爽，不用再像原来那样写for循环，jQuery源码里自己也有很多用到each方法。

其实jQuery里的each方法是通过js里的call方法来实现的。

下面简单介绍一下call方法。
call这个方法很奇妙，其实官方的说明是：“调用一个对象的一个方法，以另一个对象替换当前对象。”网上更多的解释是变换上下文环境，也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2,  , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

引用网上有一个很经典的例子

Js代码：

function add(a,b)
{
alert(a+b);
}function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);

用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);
注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

具体call更深入的就不在这里提了。

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

Js代码：

var arr = [ “one”, “two”, “three”, “four”];
$.each(arr, function(){
alert(this);
});//上面这个each输出的结果分别为：one,two,three,fourvar 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   7var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});//这个each就有更厉害了，能循环每一个属性//输出结果为：1   2  3  4

---

暂时更新到这里

【END】

위 내용은 JQuery에서 $.each와 $(selector).each()의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!