jQuery.each()
원문 링크 
http://api.jquery.com/jQuery.each/
개요 : 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 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery.isArray(), 배열인지 확인 (0) | 2012.07.02 |
|---|---|
| jQuery.inArray(), 배열 내의 값을 찾아서 인덱스를 반환 (0) | 2012.07.02 |
| jQuery.grep(), 배열 요소를 찾아 걸러내기 (0) | 2012.07.02 |
| jQuery.extend(), 두개 이상의 객체를 합치기(Merge) (0) | 2012.07.02 |
| serializeArray(), 폼 요소를 names와 values 배열로 인코딩 (0) | 2012.07.02 |
| serialize(), 폼 요소 집합을 인코딩 (2) | 2012.07.02 |
| jQuery.post(), Ajax HTTP POST 방식 요청 (1) | 2012.07.02 |
| jQuery.param(), Ajax 데이터용 배열이나 객체를 직렬화 (0) | 2012.07.02 |