본문으로 바로가기

jQuery의 each() 메서드 알아보기

category Web Tech/jQuery 2016. 7. 4. 07:00

jQuery - each() 메서드

jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있습니다.

each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드입니다.


each() 메서드는 다음과 같은 두 가지 타입이 있습니다.

javascript
// jQuery 유틸리티 메서드
$.each(object, function(index, item){

});

// jQuery 일반 메서드
$(selector).each(function(index, item){

})


위의 메서드를 차례로 알아보도록 하겠습니다.



$.each()

$.each() 메서드는 object 와 배열 모두에서 사용할 수 있는 일반적인 반복 함수입니다.

다시 말해, 배열과 length 속성을 갖는 배열과 유사 배열 객체들을 index를 기준으로 반복할 수 있습니다.

첫 번째 매개변수로 배열이나 객체를 받습니다.

그리고 두번째 매개변수로 콜백함수를 받으며 콜백함수의 인자로는 인덱스와 값을 인자로 갖습니다.

다음의 예제를 통해 살펴보도록 합니다.

javascript
// 객체을 선언
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 은 배열의 인덱스와 값을 가리키게 됩니다.


다음의 예제는 배열대신 객체를 전달하는 경우입니다.

javascript
// 객체를 선언
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

})




$().each()

다음과 같은 마크업이 있다고 가정해 봅니다.

html
<ul class="list">
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ior sit amet.</li>
    <li>Lorem ipsum </li>
</ul>


$().each() 도 반복문과 비슷합니다.

javascript
$('.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 가 추가되어 있을 것입니다.

제이쿼리에 선택자를 넘기면 해당 선택자를 자바스크립트의 반복문과 같이 사용된다고 보면 됩니다.



Jaehee's WebClub



댓글을 달아 주세요

  1. 강명석 2017.07.04 11:11

    설명이 아주 명쾌하시네요 !
    큰 도움이 되었습니다. 고맙습니다!!

  2. 행인 2017.08.10 11:46

    와 지나가면서 몇 개 봤는데 진짜 최고입니다.
    좋은 정보들 자주 자주 올려주세요!

  3. BlogIcon 2018.06.20 17:15

  4. sj 2018.09.05 11:26

    안녕하세요 작성하신 글을 통해 자바스크립트 공부하는데 많은 도움이 되었습니다. 감사합니다~
    그런데 보다가 틀린것 같은 부분을 발견해서 댓글 남겨드립니다

    $.each()
    // 배열을 선언
    var obj = { daum: 'http://daum.net', naver: 'http://naver.com' };

    이 부분에서 "배열을 선언"이 아니라 "객체를 선언" 이지 않나요??

  5. 신입 2018.10.16 18:12

    진짜 이해되었습니다!

  6. BlogIcon 포로리 2019.07.10 13:52

    구뜨구뜨! 제 블로그에 출처 남기고 퍼갈게요옹 > _< !!!!