JQuery의 Each() 사용법 소개
- 巴扎黑원래의
- 2017-07-09 11:39:131027검색
JQuery에서 Each()를 사용하기 위한 지침
jQuery 객체의 경우 Each 메소드는 단순히 위임됩니다. 즉, jQuery 객체는 jQuery의 Each 메소드에 첫 번째 매개변수로 전달됩니다. 즉, Each 메소드가 제공됩니다. jQuery에 의한 메소드는 매개변수 1에서 제공하는 객체의 모든 하위 요소에 대해 하나씩 호출하는 것입니다. Each() 함수는 기본적으로 모든 프레임워크에서 제공하는 도구 함수로 이를 통해 속성 값인 Object를 순회할 수 있습니다. 배열을 가져와 처리합니다. 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. 달력 배열(추가 매개변수 없음)
코드는 다음과 같습니다.
$.each(Array, function(i, value) { this; //this指向当前元素
i; //i表示Array当前下标
value; //value表示Array当前元素});다음은 jQuery의 각 메소드의 몇 가지 일반적인 용도입니다 arr = ["one", "two", "three", "four" arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 90 obj = {one: 1, two: 2, three: 3, four: 4each in JQuery 이 함수는 1.3.2 공식 문서에 다음과 같이 설명되어 있습니다.
일치하는 각 요소를 컨텍스트로 사용하여 함수 실행 .
전달된 함수가 실행될 때마다 함수의 this 키워드가 다른 DOM 요소(매번 다른 일치 요소)를 가리킨다는 의미입니다. 또한 함수가 실행될 때마다 일치하는 요소 집합에서 실행 환경인 요소의 위치를 나타내는 숫자 값이 매개 변수(0부터 시작하는 정수)로 함수에 전달됩니다. 'false'를 반환하면 루프가 중지됩니다(일반 루프에서 'break'를 사용하는 것과 같습니다). 다음 루프로 점프하려면 'true'를 반환합니다(일반 루프에서 'continue'를 사용하는 것과 같습니다).
다음 콜백은 요소 순회 시 제공되어야 하는 작업을 나타내는
콜백 함수
입니다. 아래의 간단한 예부터 시작해 보겠습니다.
두 개의 이미지를 반복하고 src 속성을 설정합니다. 참고: 여기서는 jQuery 객체가 아닌 DOM 객체를 나타냅니다.
<img></img/>$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
물론 요소를 탐색할 때 jquery는 사용자 정의된 점프를 허용합니다. 샘플 코드를 참조하세요. 'return'을 사용하여 Each() 루프에서 미리 이동할 수 있습니다.
코드는 다음과 같습니다.
<button>Change colors</button><span></span><p></p><p></p><p></p><p></p><p id="stop">Stop here</p><p></p><p></p><p></p>j쿼리 코드:
$("button").click(function(){
$("p").each(function(index, domEle){
$(domEle).css("backgroundColor", "wheat"); if ($(this).is("#stop")) {
$("span").text("在p块为#" + index + "的地方停止。"); return false;
}
})
} 또는 다음을 작성하세요:
코드는 다음과 같습니다.
$("button").click(function(){
$("p").each(function(index){
$(this).css("backgroundColor","wheat"); if($(this).is("#stop")){
$("span").text("在p块为#"+index+"的地方停止。"); return false;
}
})
}일러스트:
팁: false를 반환하면 루프를 조기에 중지하는 데 사용할 수 있습니다. 구문
$(selector).each(function(index,element)) 매개 변수 설명function(index,element) 필수입니다. 일치하는 각 요소에 대해 실행할 함수를 지정합니다.
•index - 선택기의 인덱스 위치
•element - 현재 요소("this" 선택기를 사용할 수도 있음
예
각 li 요소의 텍스트 출력:
코드는 다음과 같습니다:
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
实例
obj 对象不是数组
该方法同1的最大区别是：fn方法会被逐次不考虑返回值的进行进行。换句话说，obj对象的所有属性都会被fn方法进行调用，即使fn函数返回false。调用传入的参数同1类似。
代码如下:
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')。
위 내용은 JQuery의 Each() 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!