each() 함수의 개념
jQuery의 each() 메서드는 배열, Map, 그리고 객체를 매개변수로 받아, 마치 반복문처럼 그 요소들을 검사하고 반복할수 있도록 하는 함수입니다.
each() 함수의 사용
each() 메서드는 크게 다음의 세가지 방법으로 사용할 수 있습니다.
이때 callback은 콜백 함수를 의미합니다.
//1. 배열
$.each( array, callback );
//2. 객체
$.each( object, callback );
//3. Selector로 얻은 DOM 객체
$(selector).(callback);each() 메서드의 두번째 인수인 callback은 두 매개변수를 갖습니다.
이때 첫번째 인수가 뭐인지에 따라서 두 인수가 달라지는데, 이는 각각 예제에서 알 수 있다.
1. 배열
var arr = [1, 3, 5, 7]; //배열 선언
//each() 메서드의 첫번째 매개변수로 위에서 선언한 배열을 전달
$.each(arr, function(index, value){
console.log(index + " : " + value);
})
/*실행 결과
0 : 1
1 : 3
2 : 5
3 : 7
*/each() 메서드는 첫번재 매개변수로 넘어온 배열의 0번 index 요소부터 한번씩 순회할 때마다 콜백함수를 실행합니다.
첫번째 인수로 배열이 입력되면, 콜백함수는 순서대로 index와 값을 매개변수로 갖게됩니다.
다른 종류의 배열
var arr = [
{ name: 'James', age: 25 },
{ name: 'Lucy', age: 24 }
];
$.each(arr, function (index, value) {
var result = '';
result += index + ' : ' + value.name + ', ' + value.age;
console.log(result);
})
//출력 결과
//0 : James, 25
//1 : Lucy, 24이처럼 배열의 각 요소가 무엇으로 되어있든 상관없이 each() 메서드를 사용하여 반복이 가능합니다.
2. 객체
var sampleObj = {
name : "John",
age : 28,
printInfo : function(){
console.log(name + ', ' + age);
}
};
$.each(sampleObj, function(attrName, attrValue){
console.log(attrName +" : " +attrValue);
})each() 메서드의 첫번째 인수로 객체나 Map등을 넘겨주는 경우에는 속성, 함수, 메서드를 포함한 모든 멤버를 반복하여 순회합니다. 이때 콜백함수의 매개변수는 순서대로 key(property)와 키값이 됩니다.
위 코드의 출력결과는 다음과 같습니다.
//출력 결과
name : John
age : 28
printInfo : function(){
console.log(name + ', ' + age);
}3. Selector로 얻은 DOM 객체
<body>
<ul class="listClass">
<li>United States of America</li>
<li>France</li>
<li>Japan</li>
</ul>
<script>
$('.listClass li').each(function(index, item){
var txt = $(item).text(); //콜백함수로 넘어온 item을 jQuery에서 사용할수 있도록 하는 코드
console.log(txt);
})
</script>
</body>
<!--실행 결과 (console)
United States of America
France
Japan
-->jQuery 의 selector로 DOM 객체를 얻어와 each() 메소드에서 사용할 수 있습니다.
위 예제에서는 listClass의 모든
이때 콜백함수로 넘어오는 item은 jQuery 객체가 아닌 javascript의 DOM 객체이므로 jQuery 함수를 사용하고자 한다면, jQuery로 한번 잡아줘야 합니다.
이를 활용하여 다음과 같은 코드도 작성할 수 있습니다.
<body>
<ul class="listClass">
<li>후라이드 치킨</li>
<li>양념 치킨</li>
<li>허니콤보</li>
</ul>
<script>
$('.listClass li').each(function(index, item){
$(item).addClass('li_0'+index); // item에 클래스명을 추가하는 코드
});
$('.listClass li').each(function(index, item){
console.log(item.className);
})
</script>
</body>
<!-- 실행 결과
li_00
li_01
li_02
-->