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 중국어 웹사이트의 기타 관련 기사를 참조하세요!