jQuery.each(), 일반적인 반복 함수

jQuery.each()

원문 링크 http://api.jquery.com/jQuery.each/

jQuery.each( collection, callback(indexInArray, valueOfElement) )Returns : Object

개요 : object 와 배열 모두에서 사용할 수 있는 일반적인 반복 함수입니다. 배열과 length 속성을 갖는 배열과 비슷한 객체들을 index를 기준으로 반복할 수 있습니다.

  • jQuery.each( collection, callback(indexInArray, valueOfElement) )
  • collection object 또는 array.
  • callback(indexInArray, valueOfElement) 실행될 함수

$.each() 함수는 $(selector).each()와는 다릅니다. $.each() 함수는 특정한 집합을 반복문 형태로 사용할 수 있습니다. 배열을 다루는 경우에는, 콜백 함수는 인덱스와 값을 인자로 갖습니다.

$.each([52, 97], function(index, value) { 
  alert(index + ': ' + value); 
});

위 스크립트는 아래와 같은 결과를 보여줍니다.

0: 52
1: 97

만약 map 형태의 집합을 다루게 되면 key와 value의 쌍으로 동작합니다.

var map = { 
  'flammable': 'inflammable', 
  'duh': 'no duh' 
}; 
$.each(map, function(key, value) { 
  alert(key + ': ' + value); 
});

아래와 같은 결과가 나옵니다.

flammable: inflammable
duh: no duh

$.each() 반복이 동작 중에 중지하고 싶으면 false를 사용하면 됩니다. continue 문 사용도 가능합니다.

break 대신에 false를 사용해야 하네요. continue가 지원되니 다행이고요.

예 제  
배열 데이터를 반복문으로 표시합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  div#five { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.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() {
      $("#" + this).text("Mine is " + this + ".");
       return (this != "three"); // will stop running after "three"
   });

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

</body>
</html>

미리보기

 

예 제  
배열의 인덱스와 값을 알림창으로 보여줍니다.

$.each( ['a','b','c'], function(i, l){
   alert( "Index #" + i + ": " + l );
 });

 

예 제  
json 형태의 데이터에 대한 사용법입니다.

$.each( { name: "John", lang: "JS" }, function(k, v){
   alert( "Key: " + k + ", Value: " + v );
 });

 

앞에 선택자 사용 유무에 따라 each() 함수의 사용법이 달라지네요. 선택자가 있으면 선택된 요소 집합만큼 반복되는 형태는 많이들 사용하고 계실텐데, 배열을 사용할 때도 사용가능하네요. 이모저모 사용성이 좋습니다.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

Comment List

  1. 일은 존나 햇는대 이상하게 눈치가보이냐 ㅡㅡ 2016.09.22 15:22
    ㅇㅇㅇ

Write Comment