JQuery에서 $.each를 사용하는 방법과 $(selector).each()와의 차이점-JS 튜토리얼-php.cn

JQuery에서 $.each를 사용하는 방법과 $(selector).each()와의 차이점

伊谢尔伦

풀어 주다： 2017-06-17 14:37:47

원래의

1012명이 탐색했습니다.

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&#39;: ‘inflammable&#39;,
‘duh&#39;: ‘no duh&#39;
};
$.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( [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;], 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&#39; with a normal for loop
}
// else do stuff…
alert (index + “: “+ value);
});
 
</script>
</body>
</html>

로그인 후 복사

위 내용은 JQuery에서 $.each를 사용하는 방법과 $(selector).each()와의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!