정리jQuery

jQuery API 살펴보기 jQuery.each() 메서드

each, jQuery

반복 함수이다. 자바스크립트에서 foreach 와 같은 기능을 하는 메서드이다.

일반적으로 배열 또는 객체의 데이터를 반복적으로 반복하는 함수이다.

자바스크립트의 foreach 와의 조금 다른점은 인수의 위치가 반대인 것 빼고는 나머지는 같다.

1
2
3
4
//자바스크립트
[].foreach(callback(item, index){});
//jQuery
[].each(callback(index, item)){};

$.each() 메서드는 $(‘selector’).each() 와는 다르다.

$.each() 함수는 객체인지 배열에 관계없이 모든 컬렉션을 반복하는데 사용할 수 있다.

배열의 경우 콜백은 배열 인덱스와 해당 배열 값을 전달 받는다.

값들은 this 키워드를 통해서 접근할 수도 있지만 단순한 문자열이나 숫자도 자바스크립트는 항상 이 값을 Object(객체)로 wrapping 한다.

예제

배열

1
2
3
4
5
6
7
8
$.each([ 52, 97 ], function( index, value ) {
  console.log( index + ": " + value );
});

/***** 결과
0: 52
1: 97
*****/

객체를 사용해서 each() 메서드를 사용할 경우 key-value 구조로 콜백에 전달된다.

1
2
3
4
5
6
7
8
9
10
11
12
var obj = {
  "flammable": "inflammable",
  "duh": "no duh"
};
$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

/****
flammable: inflammable
duh: no duh
*****/

$.each() 반복을 멈추려면 return false를 코드상에 작성하면 된다.

배열에서의 $.each() 메서드에서 “three” 부분에서 반복을 멈추는 부분이 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.each demo</title>
  <style>
  div {
    color: blue;
  }
  div#five {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>

<script>
var arr = [ "one", "two", "three", "four", "five" ];
var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };

jQuery.each( arr, function( i, val ) {
  $( "#" + val ).text( "Mine is " + val + "." );

  // Will stop running after "three"
  return ( val !== "three" );
});

jQuery.each( obj, function( i, val ) {
  $( "#" + i ).append( document.createTextNode( " - " + val ) );
});
</script>

</body>
</html>
Share