JQuery에서 $.each를 사용하는 방법과 $(selector).each()와의 차이점
- 伊谢尔伦원래의
- 2017-06-17 14:37:47994검색
each() 메서드를 사용하면 DOM 루프 구조를 간결하고 오류 가능성을 줄일 수 있습니다. Each() 함수는 매우 강력한 순회 함수를 캡슐화하고 사용하기 매우 편리합니다. 1차원 배열, 다차원 배열, DOM, JSON 등을 순회할 수 있습니다. JavaScript 개발 프로세스 중에 $each를 사용하면 우리의 작업량을 크게 덜어줍니다.
each() 메서드 예:
var arr = [ "aaa", "bbb", "ccc" ];
$.each(arr, function(i,a){
alert(i); // i 是循环的序数
alert(a); // a 是值
});
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});사실 arr1은 2차원 배열이고, item은 각 1차원 배열을 취하는 것과 동일하며,
item[0]은 각 배열의 첫 번째 값을 취하는 것과 같습니다. -차원 배열
위의 각 출력은 다음과 같습니다. 1 4 7
객체 및 배열을 트래버스하는 데 사용할 수 있는 일반 순회 함수입니다. 길이 속성을 포함하는 배열 및 의사 배열 객체(예: 의사 배열 객체) 함수의 인수 객체로) 0에서 길이-1까지 숫자 인덱스를 사용하여 탐색하고 다른 객체는 속성을 통해 탐색합니다.
$.each()는 $(selector).each()와 다릅니다. jquery 객체 순회 전용으로, 전자는 모든 컬렉션(배열이든 객체이든)을 순회하는 데 사용할 수 있습니다. 배열인 경우 콜백 함수 가 배열의 인덱스와 해당 값을 전달합니다. 매번(이 키워드를 통해서도 값을 얻을 수 있지만 javascript는 항상 래핑됩니다. 이 값은 string 또는 숫자와 같은 객체입니다) 메소드는 반복된 객체의 첫 번째 매개변수를 반환합니다.
예:————배열 전달
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each([52, 97], function(index, value) {
alert(index + ‘: ‘ + value);
});
</script>
</body>
</html>//输出 0: 52 1: 97
예:————지도가 컬렉션으로 사용되는 경우 콜백 함수는 매번 하나의 키-값 쌍을 전달합니다
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
var map = {
‘flammable': ‘inflammable',
‘duh': ‘no duh'
};
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
});
</script>
</body>
</html>//输出 flammable: inflammable duh: no duh
예:————콜백 함수에서 false를 반환할 때 $.each()를 종료할 수 있습니다. false가 아닌 값을 반환하면 for 루프에서 continue를 사용하는 것과 같으며 즉시 다음 순회
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; }
p#five { color:red; }
</style>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<p id=”one”></p>
<p id=”two”></p>
<p id=”three”></p>
<p id=”four”></p>
<p id=”five”></p>
<script>
var arr = [ "one", "two", "three", "four", "five" ];//数组
var obj = { one:1, two:2, three:3, four:4, five:5 }; // 对象
jQuery.each(arr, function() { // this 指定值
$(“#” + this).text(“Mine is ” + this + “.”); // this指向为数组的值, 如one, two
return (this != “three”); // 如果this = three 则退出遍历
});
jQuery.each(obj, function(i, val) { // i 指向键, val指定值
$(“#” + i).append(document.createTextNode(” – ” + val));
});
</script>
</body>
</html>// 输出 Mine is one. – 1 Mine is two. – 2 Mine is three. – 3 - 4 - 5
예:————배열 항목 순회, 인덱스 및 값 전달
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each( ['a','b','c'], function(i, l){
alert( “Index #” + i + “: ” + l );
});
</script>
</body>
</html>예:——객체의 속성 순회, 키 및 값 전달
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each( { name: “John”, lang: “JS” }, function(k, v){
alert( “Key: ” + k + “, Value: ” + v );
});
</script>
</body>
</html> 댓글 예시
1. 첫 번째 One 항목을 출력하지 않으려면(retrun true 사용) 다음 반복에 들어갑니다
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
if (index == 0) {
return true; // equivalent to ‘continue' with a normal for loop
}
// else do stuff…
alert (index + “: “+ value);
});
</script>
</body>
</html>위 내용은 JQuery에서 $.each를 사용하는 방법과 $(selector).each()와의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!