오늘은 jQuery 의 each() 메서드에 대해서 알아보려고 합니다.
each() 함수의 개념
jQuery의 each() 메서드는 배열, Map, 그리고 객체를 매개변수로 받아, 마치 반복문처럼 그 요소들을 검사하고 반복할수 있도록 하는 함수입니다. 개인적으로 C++등의 범위기반 for문(range-based for loops)과 유사하다고 생각합니다.
//C++ 의 범위 기반 for문 (Range-based for loop)
int main(){
int arr[] = { 1, 2, 3};
for (int i : arr)
{
cout << i << " ";
}
}
//출력 결과
//1 2 3
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의 모든 <li>태그를 selector로 잡아서 each() 메소드를 실행하고 있습니다.
이때 콜백함수로 넘어오는 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
-->
또한 크롬의 개발자 도구(F12) 를 보면 리스트부분의 코드가 다음과 같이 바뀌어져 있는 것을 확인할 수 있다.
