each() 함수는 기본적으로 모든 프레임워크에서 제공하는 도구 함수입니다. 이를 통해 객체와 배열의 속성값을 순회하여 처리할 수 있습니다. jQuery와 jQuery 개체 모두 이 메서드를 구현합니다. jQuery 개체의 경우에는 각 메서드가 간단하게 위임됩니다. 즉, jQuery 개체는 jQuery의 각 메서드에 첫 번째 매개 변수로 전달됩니다. 즉, jQuery에서 제공하는 각 메서드는 다음의 모든 하위 요소입니다. 매개변수 1에 의해 제공된 객체는 하나씩 호출됩니다. jQuery 객체가 제공하는 각 메소드는 jQuery 내부의 하위 요소를 하나씩 호출합니다.
매개변수 유형에 따라 각 기능의 효과가 완전히 일관되지는 않습니다.
1. 객체 탐색(추가 매개변수 포함)
$.each(객체, 함수(p1, p2) {
//여기서는 각 순회에서 Object의 현재 속성 값을 가리킵니다
p1; //추가 매개변수에 액세스
}, ['매개변수 1', '매개변수 2']);
2. 배열 탐색(첨부 매개변수 포함)
$.each(배열, 함수(p1, p2){
//This는 각 순회에서 배열의 현재 요소를 가리킵니다
p1; //추가 매개변수에 액세스
}, ['매개변수 1', '매개변수 2']);
3. 객체 탐색(추가 매개변수 없음)
$.each(객체, 함수(이름, 값) {
//this는 현재 속성의 값을 가리킵니다
Name; //name은 객체의 현재 속성 이름을 나타냅니다
value; //값은 객체의 현재 속성 값을 나타냅니다
});
4. 배열 탐색(추가 매개변수 없음)
$.each(배열, 함수(i, 값) {
//this는 현재 요소를 가리킵니다.
i; //i는 배열의 현재 첨자를 나타냅니다.
value; //값은 배열의 현재 요소를 나타냅니다
});
다음은 jQuery의 각 메소드의 몇 가지 일반적인 용도입니다
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
로그인 후 복사
1.3.2 공식 문서에는 JQuery의 각 기능에 대해 다음과 같이 설명되어 있습니다.
각(콜백)
각 일치하는 요소를 컨텍스트로 사용하여 함수를 실행합니다.
이는 전달된 함수가 실행될 때마다 함수의 this 키워드가 다른 DOM 요소(매번 다른 일치 요소)를 가리킨다는 것을 의미합니다. 또한 함수가 실행될 때마다 일치하는 요소 집합에서 실행 환경인 요소의 위치를 나타내는 숫자 값이 매개 변수(0부터 시작하는 정수)로 함수에 전달됩니다. 'false'를 반환하면 루프가 중지됩니다(일반 루프에서 'break'를 사용하는 것과 같습니다). 다음 루프로 점프하려면 'true'를 반환합니다(일반 루프에서 'continue'를 사용하는 것과 같습니다).
후속 콜백은 요소를 순회할 때 할당해야 하는 작업을 나타내는 콜백 함수입니다. 아래의 간단한 예를 살펴보겠습니다.
두 이미지를 반복하고 src 속성을 설정합니다. 참고: 여기서는 jQuery 객체가 아닌 DOM 객체를 나타냅니다.
HTML 코드:
![]()
![]()
jQuery 코드:
$("img").each(함수(i){
this.src = "테스트" i ".jpg"
})
결과:[
,
]
물론 요소를 순회할 때 jquery는 사용자 정의된 점프를 허용합니다. 샘플 코드를 참조하세요. 'return'을 사용하여 Each() 루프에서 미리 이동할 수 있습니다.
HTML 코드:
<버튼>색상 변경
<스팬>
여기서 중지
jQuery 코드:
코드 복사
코드는 다음과 같습니다.
$("버튼").click(function(){
아니면 이렇게 쓰세요:
코드 복사
코드는 다음과 같습니다.
$("버튼").click(function(){
$("div").each(함수(색인){
일러스트레이션:
Each() 메서드는 일치하는 각 요소에 대해 실행할 함수를 지정합니다.
팁: false를 반환하면 루프를 조기에 중지하는 데 사용할 수 있습니다.
문법
$(selector).each(function(index,element)) 매개변수 설명
함수(색인,요소)가 필요합니다. 일치하는 각 요소에 대해 실행할 함수를 지정합니다.
•index - 선택기의 인덱스 위치
•element - 현재 요소("this" 선택기를 사용할 수도 있음
예시
각 li 요소의 텍스트를 출력합니다.
코드 복사
코드는 다음과 같습니다.
$("버튼").click(function(){
$("li").each(function(){
경고($(this).text())
})
})
예시
obj 객체가 배열이 아닙니다
이 메소드와 1의 가장 큰 차이점은 반환 값을 고려하지 않고 fn 메소드가 차례로 실행된다는 점입니다. 즉, fn 함수가 false를 반환하더라도 obj 객체의 모든 속성은 fn 메서드에 의해 호출됩니다. 호출에 전달된 매개변수는 1과 유사합니다.
코드 복사
코드는 다음과 같습니다.
jQuery.each=function( obj, fn, args ) {
if (args) {
if ( obj.length == 정의되지 않음 ){
}
} 다른 {
if ( obj.length == 정의되지 않음 ) {
for(obj의 var i)
fn.call( obj, i, obj )
}그밖에{
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[ i] ){}
}
}
반환 개체
}
각 메서드에서 fn의 구체적인 호출 메서드는 단순한 fn(i, val) 또는 fn(args)가 아니라 fn.call(val,i,val) 또는 fn.apply(obj .args)라는 점에 유의해야 합니다. 즉, 자체 fn 구현에서 이 포인터를 직접 사용하여 배열이나 객체의 하위 요소를 참조할 수 있습니다.
그럼 각각의 점프 방법
jquery가 선택한 객체를 탐색할 때 각각을 사용하는 것이 더 편리합니다. 조건을 충족하는 개체를 찾은 후 이 루프를 중단해야 하는 응용 프로그램이 있습니다.
JavaScript에서는 루프를 벗어나기 위해 일반적으로 break를 사용합니다.
동료가 이 문제에 직면했을 때 그는 이 순환에서 벗어나기 위해 무의식적으로 휴식을 사용했습니다. 결과는 오류입니다
구문 오류: 레이블이 지정되지 않은 중단은 루프 또는 스위치 내부에 있어야 합니다
확인해보고 하나 써봐야겠어요
콜백 함수에서 false를 반환하면 됩니다. 대부분의 jq 메소드는 다음과 같습니다
'false'를 반환하면 루프가 중지됩니다(일반 루프에서 'break'를 사용하는 것과 같습니다).
다음 루프로 점프하려면 'true'를 반환합니다(일반 루프에서 'continue'를 사용하는 것과 같습니다).
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
