jquery.each 사용법 및 예제 코드에 대한 자세한 설명-JS 튜토리얼-php.cn

jquery.each 사용법 및 예제 코드에 대한 자세한 설명

伊谢尔伦

풀어 주다： 2017-07-19 13:50:32

원래의

1443명이 탐색했습니다.

jQuery.each 메소드는 jQuery의 핵심 도구 메소드 중 하나로 객체와 배열을 반복하는데 사용할 수 있는 일반적인 반복 메소드입니다. jQuery 객체를 반복하는 $().each() 메서드와 달리 이 메서드는 모든 객체를 반복하는 데 사용할 수 있습니다. 일반적으로 두 개의 매개변수가 필요합니다.

object: 탐색해야 하는 객체 또는 배열.

콜백: 각 멤버/요소에 의해 실행되는 콜백 함수입니다.

콜백 함수에는 두 개의 매개변수가 있습니다. 첫 번째는 객체의 멤버 또는 배열의 인덱스이고 두 번째는 해당 변수 또는 콘텐츠입니다. 각 루프를 종료해야 하는 경우 콜백 함수가 false를 반환하도록 하면 다른 반환 값은 무시됩니다.

요소 인덱스와 콘텐츠를 모두 사용하여 배열을 반복하는 예입니다. 예를 들면 다음과 같습니다.

//例遍对象，同时使用成员名称和变量内容。
$.each( [0,1,2], function(i, n){
 alert( "Item #" + i + ": " + n );
});
//例遍对象，同时使用成员名称和变量内容。

$.each( { name: "John", lang: "JS" }, function(i, n){
 alert( "Name: " + i + ", Value: " + n );
});

로그인 후 복사

물론 인스턴스 호출을 직접 사용할 수도 있습니다

  $( &#39;p&#39; ).each( function(i,n){
    return i+n.text;
  } )

로그인 후 복사

실제로 소스 코드의 인스턴스(프로토타입) 메서드도 정적 메서드라고 하므로 각 항목을 분석하기 위해 메서드의 경우 정적 메서드만 분석하면 됩니다. 인스턴스 호출은 정적 메서드를 사용하는 특별한 경우입니다.

// Execute a callback for every element in the matched set.
  // (You can seed the arguments with an array of args, but this is
  // only used internally.)
  each: function( callback, args ) {
    return jQuery.each( this, callback, args );
  },

로그인 후 복사

프로토타입 메소드에서 이 객체를 순회할 객체로 직접 전달합니다. 다음은 정적 메소드의 소스 코드입니다.

// args is for internal usage only
  each: function( object, callback, args ) {
    var name, i = 0,
      length = object.length,
      isObj = length === undefined || jQuery.isFunction( object );
    if ( args ) {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.apply( object[ name ], args ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.apply( object[ i++ ], args ) === false ) {
            break;
          }
        }
      }

    // A special, fast, case for the most common use of each
    } else {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }

    return object;
  },

로그인 후 복사

먼저 3가지 매개변수를 허용합니다. 이때, 우리가 자주 사용하는 매뉴얼에서는 보통 2개의 매개변수를 작성하는데, 일반적으로 2개의 매개변수를 사용하지만 실제로는 소스코드에서 허용되는 매개변수가 3개이고, 세 번째 매개변수는 배열이므로 Passed 됩니다. 콜백 함수의 매개변수로 사용됩니다.

먼저 몇 가지 변수를 선언합니다. i, 이름 및 길이는 루프를 준비하기 위한 것입니다. isObj는 매개변수가 함수인지 또는 길이 속성인지를 판단하여 편리한 매개변수인지 구별합니다. 존재하지 않으면 객체인지 판단합니다. 다른 것들은 배열로 처리되거나 배열과 유사하게 처리됩니다.

isObj = length === 정의되지 않음 || jQuery.isFunction( object );
이 문장은 매우 간결하게 작성되었으며 연산자의 우선순위를 사용하여 먼저 실행합니다 ===

사실 이 판단은 그다지 정확하지 않습니다. 이는 대략적인 추정일 뿐입니다. 예를 들어

 var obj={length:&#39;a&#39;};
 var isObj= obj.length=== undefined || jQuery.isFunction( obj );
 alert(isObj); //false

로그인 후 복사

그러면 세 번째 매개변수를 추가했는지 여부에 따라 구별이 이루어지는데, 이를 추가하지 않고 먼저 상황을 살펴보겠습니다. 즉,

} else {
      if ( isObj ) {
        for ( name in object ) {
          if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
          }
        }
      } else {
        for ( ; i < length; ) {
          if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
            break;
          }
        }
      }
    }

로그인 후 복사

입니다. isObj 변수를 기준으로 "배열과 객체를 구별합니다. 배열의 경우 for 루프를 사용하면 객체에 대해 for...in 루프가 사용됩니다. 루프가 실행될 때마다 콜백 함수가 실행되고 배열 또는 객체 키와 현재 루프의 값이 전달됩니다. 여기서 사용된 호출 메서드의 첫 번째 매개 변수는 함수입니다. "this"는 현재 루프의 값을 this로 사용하는 것이므로 다음 두 개는 키와 값입니다. 루프에서 콜백 함수의 두 번째 매개변수를 사용할 때 this를 사용하는 것과 같습니다. 예:

//刚才的例子
 $( &#39;p&#39; ).each( function(i,n){
    return i+n.text;
  } )
//等价于
 $( &#39;p&#39; ).each( function(i,n){
    return i+this.text;
  } )

로그인 후 복사

세 번째 매개변수가 추가된 경우 콜백 함수의 값 전달 방법이 변경됩니다. 이는 매개변수 전달에 여전히 사용되지만, args도 변경됩니다. 이 배열에 있는 만큼 많은 매개변수를 콜백 함수에서 사용할 수 있습니다. 여기서 주목해야 할 점은 세 번째 매개변수는 js 원본 배열이어야 한다는 것입니다. 클래스 배열 또는 jQuery 객체일 수 없습니다. 그렇지 않으면 Apply Method가 지원되지 않으므로 오류가 보고됩니다. 콜백 함수가 false를 반환하면 루프를 건너뜁니다. 예를 들어 홀수 첨자 배열만 처리할 수 있습니다. 짝수라고 판단할 수 있으면 콜백 함수