each() 란?
- jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있다.
- each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문 과 같이 배열이나 객체의 요소를 검사할 수 있다.
Type
// jQuery 유틸리티 메서드
$.each(object, function(index, item){
});
// jQuery 일반 메서드
$(selector).each(function(index, item){
})$.each() 예시
$.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
})$().each()
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<ul class="list">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ior sit amet.</li>
<li>Lorem ipsum </li>
</ul>
</body>
<script>
$('.list li').each(function (index, item) {
$(item).addClass('li_0' + index);
})
</script>
</html>다음의 코드를 실행해보자.
li 의 클래스에 li_00, li_01, li_02 가 추가되어 있는 모습을 보고 있다.
Step by step goes a long way ✨