>  기사  >  웹 프론트엔드  >  예제를 사용하여 jquery의 각() 메서드에 대한 자세한 설명

예제를 사용하여 jquery의 각() 메서드에 대한 자세한 설명

伊谢尔伦
伊谢尔伦원래의
2017-06-16 16:10:121257검색

each() 함수는 기본적으로 모든 프레임워크에서 제공하는 도구 함수로, 이를 통해 객체와 배열의 속성값을 순회하여 처리할 수 있습니다. jQuery와 jQuery 개체 모두 이 메서드를 구현합니다. jQuery 개체의 경우에는 각 메서드가 간단하게 위임됩니다. 즉, jQuery 개체는 jQuery의 각 메서드에 첫 번째 매개 변수로 전달됩니다. 즉, jQuery에서 제공하는 각 메서드는 다음의 모든 하위 요소입니다. 매개변수 1에 의해 제공된 객체는 하나씩 호출됩니다. jQuery 객체가 제공하는 각 메소드는 jQuery 내부의 하위 요소를 하나씩 호출합니다.

다음은 각각의 일반적으로 사용되는 몇 가지 용도입니다

1. 각 프로세스는

1차원 배열

 var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);   
      alert(val);
  });

alert(i)는 0, 1, 2를 출력합니다.

alert(val)는 aaa, bbb, ccc를 출력합니다.

2. 각각은

2차원 배열을 처리합니다.

 var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
  $.each(arr, function(i, item){      
      alert(i);   
      alert(item);      
  });

arr2는 2차원 배열이고, item은 이 2차원 배열에서 각 배열을 취하는 것과 같습니다.

item[0]은 각 1차원 배열의 첫 번째 값을 기준으로
alert(i)는 0, 1, 2를 출력합니다. 이 2차원 배열에는 3개의 배열 요소가 포함되어 있기 때문입니다.
alert(item)은 For [' a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']

이 두 가지에 대해 배열 처리 후 약간 변경되었습니다.

var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
   $.each(arr, function(i, item){      
        $.each(item,function(j,val){
            alert(j);
            alert(val);
     }); 
});

alert(j)는 0, 1, 2, 0, 1, 2, 0, 1, 2


로 출력됩니다. Alert(val)은 a, aa, aaa, b, bb로 출력됩니다. , bbb, c, cc, ccc

각각은 json 데이터를 처리합니다. 각각은 훨씬 더 강력하며 모든 속성을 순환할 수 있습니다

var obj = { one:1, two:2, three:3};      
   each(obj, function(key, val) {      
        alert(key);   
        alert(val);      
   });

여기에서 경보(키)는 하나 둘 셋을 출력합니다

alert(val)는 하나를 출력합니다. 1, 2, 2, 3, 3
왜 여기서 핵심은 숫자가 아니라 속성인가요? json 형식은 순서가 없는 속성 값의 집합이기 때문에 숫자는 어디에 있나요?
그리고 이 값은 obj[key]

ecah가 dom 요소를 처리하는 것과 동일합니다. 여기서는 입력 양식 요소가 예로 사용됩니다.


돔에 이와 같은 코드가 있는 경우

faccfcae027ff734f73dd06266eca48e
9270aeed825af53becaa51955ba16cd5
a64ed2e9863cf3d87033948a4a36efde
0d66954fc10f8c4c77ab26947d88390f
그 다음에는 각각 다음과 같이 사용합니다.

$.each($("input:hidden"), function(i,val){  
     alert(val);
     alert(i);
     alert(val.name);
     alert(val.value);   
 });

그러면 Alert(val)은 양식 요소이므로 [object HTMLInputElement]를 출력합니다.

alert(i)는 0, 1, 2, 3을 출력합니다.


alert(val.name)은 aaa, bbb, ccc, ddd를 출력합니다. this.name을 사용하면 동일한 결과가 출력됩니다.

alert (val .value); this.value를 사용하면 동일한 결과가 출력됩니다.

each(callback) 각 일치하는 요소를 컨텍스트로 사용하여 함수를 실행합니다. 전달된 함수가 실행될 때마다 함수의 this 키워드가 다른 DOM 요소(매번 다른 일치 요소)를 가리킨다는 의미입니다. 또한 함수가 실행될 때마다 일치하는 요소 집합에서 실행 환경인 요소의 위치를 ​​나타내는 숫자 값이 매개 변수(0부터 시작하는 정수)로 함수에 전달됩니다. 'false'를 반환하면 루프가 중지됩니다(일반 루프에서 'break'를 사용하는 것과 같습니다). 다음 루프로 이동하려면 'true'를 반환합니다(일반 루프에서 '
continue'를 사용하는 것과 같습니다). 다음 콜백은
콜백 함수로, 요소를 순회할 때 제공되어야 하는 작업을 나타냅니다. 아래의 간단한 예부터 시작해 보겠습니다. 두 개의 이미지를 반복하고 src 속성을 설정합니다. 참고: 여기서는 jQuery 객체가 아닌 DOM 객체를 나타냅니다.

each() 메서드는 일치하는 각 요소에 대해 실행할 함수를 지정합니다.

팁: false를 반환하면 루프를 조기에 중지하는 데 사용할 수 있습니다.
구문
$(selector).each(function(index,element)) 매개 변수 설명
function(index,element) 필수입니다. 일치하는 각 요소에 대해 실행할 함수를 지정합니다.
•index - 선택기의 인덱스 위치
•element - 현재 요소("this" 선택기를 사용할 수도 있음)

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

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

위 내용은 예제를 사용하여 jquery의 각() 메서드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.