jQuery $.each() 함수 100% 활용하기!
jQuery의
$.each() 함수는 배열의 요소나 Map 또는 객체의 속성을 반복할 수 있도록 하는 함수입니다. 개인적으로 매우매우 자주 사용하는 함수이기도 합니다. jQuery뿐만 아니라 underscoreJS같은 자바스크립트 유틸리티 라이브러리들에도 쉽게 볼 수 있는 함수(사용법은 라이브러리마다 다를 수있음)입니다.기본적인 javascript의
for문과의 차이점이라면 for문에는 조건식에 배열의 length만큼의 범위 지정을 해주어야 하고 증감식을 매번 써주어야 하는데에 반해 each()는 이러한 조건을 써주지 않아도 되기 때문에 코드를 더 보기 편하고 배열 뿐만 아니라 DOM 객체나 일반 객체 등에도 사용이 가능하다는 점이 있습니다.$.each()함수는 크게 세가지 방법으로 사용이 가능합니다.
$.each( array, callback ); $.each( object, callback ); $(selector).(callback); | cs |
배열 반복하기
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); }); | cs |
실행 결과는 아래와 같습니다.
배열을 곧바로 인자로 넘겨도 됩니다.
$.each([ 1, 10, 7, 9, 5 ], function(index, value) { console.log(index + " : " + value); }); | cs |
좀 더 보기 편하게 코딩을 해보자면 아래와 같이 배열과 callback 함수를 각각 넘길수도 있으며 결과는 동일합니다.
var arr = [ 1, 10, 7, 9, 5 ]; var callback = function(index, value) { console.log(index + " : " + value); }; $.each(arr, callback); | cs |
배열에 각 요소가 무엇이든 상관없이 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); }); | cs |
실행결과는 아래와 같습니다.
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); }); | cs |
특정 객체의 모든 속성이나 Map의 모든 요소들을 반복하고 싶을때 유용하게 사용됩니다.
Selector로 얻은 DOM 객체 반복하기
jQquery 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> | cs |
실행결과입니다.
다음글
'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 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그