jQuery에는 each()라는 메서드가 있다.
each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드다.
바로 보자.
each() 메서드는 다음과 같은 두 가지 타입이 있다.
// jQuery 유틸리티 메서드
$.each(object, function(index, item){
});
// jQuery 일반 메서드
$(selector).each(function(index, item){
})
$.each() 메서드는 object 와 배열 모두에서 사용할 수 있는 일반적인 반복 함수다.
다시 말해, 배열과 length 속성을 갖는 배열과 유사 배열 객체들을 index를 기준으로 순회하며 반복작업을 할 수 있다.
첫번째 인자
배열 혹은 오브젝트
두번째 인자
콜백함수를 받으며 콜백함수의 인자로 인덱스와 값을 인자로 갖는다.
아래는 예제이다.
// 객체을 선언
var arr= [
{title : '다음', url : 'http://daum.net'},
{title : '네이버', url : 'http://naver.com'}
];
// $.each() 메서드의 첫번째 매겨변수로 위에서 선언한 배열은 전달
$.each(arr, function (index, item) {
// 두 번째 매개변수로는 콜백함수인데 콜백함수의 매개변수 중
// 첫 번째 index는 배열의 인덱스 또는 객체의 키를 의미하고
// 두 번째 매개 변수 item은 해당 인덱스나 키가 가진 값을 의미합니다.
var result = '';
result += index +' : ' + item.title + ', ' + item.url;
console.log(result);
// 0 : 다음, http://daum.net
// 1 : 네이버, http://naver.com
})
배열을 활용하는 예제이다.
배열을 받게 되면 콜백함수의 index, item 은 배열의 인덱스와 값을 가리키게 됨
아래는 객체를 활용하는 예제이다.
// 객체를 선언
var obj = {
daum: 'http://daum.net',
naver: 'http://naver.com'
};
// $.each() 메서드의 첫번째 매겨변수로 위에서 선언한 객체를 전달
$.each(obj, function (index, item) {
// 객체를 전달받으면 index는 객체의 key(property)를 가리키고
// item은 키의 값을 가져옵니다.
var result = '';
result += index + ' : ' + item;
console.log(result);
// daum : http://daum.net
// naver : http://naver.com
})
다음과 같은 마크업이 있다고 가정해 보자.
<ul class="list">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ior sit amet.</li>
<li>Lorem ipsum </li>
</ul>
개념 자체는 .each와 같다.
$('.list li').each(function (index, item) {
// 인덱스는 말 그대로 인덱스
// item 은 해당 선택자인 객체를 나타냅니다.
$(item).addClass('li_0' + index);
// item 과 this는 같아서 일반적으로 this를 많이 사용합니다.
// $(this).addClass('li_0' + index);
});
위 코드를 실행하면 li 의 클래스에 li_00, li_01, li_02 가 추가되어 있을 것이다.
제이쿼리에 선택자를 넘기면 해당 선택자를 자바스크립트의 반복문과 같이 사용된다고 보면 됨.
출처: https://webclub.tistory.com/455 [Web Club]