jQuery.each 사용법에 대한 자세한 설명

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

개체, 즉 순회해야 하는 개체 또는 배열 두 개의 매개변수가 필요합니다.

콜백: 각 멤버/요소가 실행하는 콜백 함수입니다.

콜백 함수에는 두 개의 매개변수가 있습니다. 첫 번째는 객체의 멤버 또는 배열의 인덱스이고 두 번째는 해당 변수 또는 콘텐츠입니다. 각 루프를 종료해야 하는 경우 콜백 함수가 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 );
});

물론 인스턴스를 직접 사용하여

$( 'div' ).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개의 매개변수에 주목해야 합니다. 우리는 일반적으로 두 개의 매개변수를 사용하지만 실제로는 소스 코드에서 허용할 수 있는 매개변수가 3개 있습니다. 세 번째 매개변수는 배열이며 콜백 함수의 매개변수로 전달됩니다.

먼저 몇 가지 변수를 선언합니다. i, 이름, 길이는 루프를 준비하기 위한 것입니다. isObj는 매개 변수가 함수인지 또는 객체인지를 판단하여 편리한 매개 변수인지 구분합니다. 길이 속성이 존재하지 않는 경우 객체라고 판단되며, 나머지는 배열 또는 배열 유사 객체로 처리됩니다.

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

사실 이것은 판단이 그다지 정확하지 않고 대략적인 구분일 뿐입니다. 예를 들면

var obj={length:'a'};
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를 사용하는 것과 같습니다. 예:

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

세 번째 매개변수가 추가된 경우 콜백 함수의 값을 전달하는 방식이 변경되며, 적용 메소드가 사용됩니다. 매개변수 전달은 여전히 ​​현재 값을 가리키지만 세 번째 매개변수 배열인 args가 전달됩니다. 이 배열에 있는 매개변수만큼 콜백 함수는 사용할 수 있는 만큼의 매개변수를 갖습니다. 여기서 주목해야 할 점은 세 번째 매개변수가 js여야 한다는 것입니다. 원래 배열 형식은 배열형 또는 jQuery 객체일 수 없습니다. 그렇지 않으면 적용 메서드가 지원되지 않기 때문에 오류가 보고됩니다. 콜백 함수가 false를 반환하면 루프를 건너뜁니다. 예를 들어 홀수 항목인 경우 콜백 함수

마지막으로 원본 객체나 배열 등을 반환합니다.

return object;

위 내용은 이 글의 전체 내용이니, 마음에 드셨으면 좋겠습니다.

jQuery.each 사용에 대한 더 자세한 글은 PHP 중국어 홈페이지를 참고해주세요!