[jQuery] 제이쿼리 $.each() 함수 100% 활용하기!
jQuery $.each() 함수 100% 활용하기!
jQuery의 $.each() 함수는 배열의 요소나 Map 또는 객체의 속성을 반복할 수 있도록 하는 함수입니다. 개인적으로 매우매우 자주 사용하는 함수이기도 합니다. jQuery뿐만 아니라 underscoreJS같은 자바스크립트 유틸리티 라이브러리들에도 쉽게 볼 수 있는 함수(사용법은 라이브러리마다 다를 수있음)입니다.
기본적인 javascript의 for문과의 차이점이라면 for문에는 조건식에 배열의 length만큼의 범위 지정을 해주어야 하고 증감식을 매번 써주어야 하는데에 반해 each()는 이러한 조건을 써주지 않아도 되기 때문에 코드를 더 보기 편하고 배열 뿐만 아니라 DOM 객체나 일반 객체 등에도 사용이 가능하다는 점이 있습니다.
$.each()함수는 크게 세가지 방법으로 사용이 가능합니다.
$.each( array, callback );
$.each( object, callback );
$(selector).(callback);
배열 반복하기
each()함수의 첫번째 인자로 배열을 넣고 두번째에는 각 요소를 순회할때마다 실행될 callback함수(function)를 인자로 주면 됩니다. each()함수는 배열을 0번 index 요소부터 한번씩 순회할때마다 callback 함수를 실행하는데, 이때 각 요소의 index를 callback함수의 첫번째 인자로, 요소의 값을 두번째 인자로 넘겨줍니다.
var arr = [ 1, 10, 7, 9, 5 ];
$.each(arr, function(index, value) {
console.log(index + " : " + value);
});
실행 결과는 아래와 같습니다.
배열을 곧바로 인자로 넘겨도 됩니다.
$.each([ 1, 10, 7, 9, 5 ], function(index, value) {
console.log(index + " : " + value);
});
좀 더 보기 편하게 코딩을 해보자면 아래와 같이 배열과 callback 함수를 각각 넘길수도 있으며 결과는 동일합니다.
var arr = [ 1, 10, 7, 9, 5 ];
var callback = function(index, value) {
console.log(index + " : " + value);
};
$.each(arr, callback);
배열에 각 요소가 무엇이든 상관없이 each()로 반복이 가능합니다.
var arr = [
{
name : "kim",
age : 10
},{
name : "lee",
age : 13
},{
name : "park",
age : 5
}
];
$.each(arr, function(index, obj) {
console.log(index);
console.log("name : " + obj.name);
console.log("age : " + obj.age);
});
실행결과는 아래와 같습니다.
Map 또는 객체 반복하기
$.each()함수에 반복 대상을 배열이 아닌 객체나 Map등으로 지정하는 경우에는 객체의 모든 멤버(속성, 함수, 메서드)를 반복하여 순회합니다.
var obj = {
name : "kim",
age : "29",
hello : function(){
console.log('hello world');
}
};
$.each(obj, function(attrName, attrValue) {
console.log("attrName : " + attrName);
console.log("attrValue : " + attrValue);
});
특정 객체의 모든 속성이나 Map의 모든 요소들을 반복하고 싶을때 유용하게 사용됩니다.
Selector로 얻은 DOM 객체 반복하기
jQuery Selector로 DOM 객체를 얻음과 동시에 반복을 수행할 수 있습니다. 아래 코드는 html상의 모든 <span> 태그를 selector로 잡아서 each()를 실행하는 모습입니다. callback으로 넘어오는 item은 jQuery 객체가 아닌 순수한 javascript의 DOM 객체이므로 jQuery 함수를 사용하고 싶다면 jQuery로 한번 잡아줘야 합니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<span>1</span>
<span>5</span>
<span>10</span>
<span>7</span>
<span>30</span>
<script>
$('span').each(function(index, item){
var text = $(item).text();
console.log(text);
});
</script>
</body>
</html>
실행결과입니다.
다음글
[jQuery] 제이쿼리 $.each() 함수에서 break문 continue문 사용하는 방법
'JavaScript' 카테고리의 다른 글
| [Underscore.js] 언더스코어JS 객체 합치기 _.extend() 함수 사용법 (0) | 2019.12.17 |
|---|---|
| [jQuery] 제이쿼리 $.each() 함수에서 break문 continue문 사용하는 방법 (0) | 2019.12.17 |
| [JavaScript] button 태그에서 a 태그처럼 href 설정하여 링크 이동하기 (0) | 2019.11.29 |
| [JavaScript] 자바스크립트로 form 태그의 input 검증(validation) 후에 수동으로 submit 처리하기 (1) | 2019.07.27 |
| [JavaScript] 자바스크립트의 자료형(Data Type) (0) | 2019.06.05 |
도로락
WriterIT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그