[jQuery] each() 사용법

1. each()

배열 같은 여러개의 데이터를 탐색할 때 사용할 수 있는 함수다.

<div id="btnDiv">
    <button id="test1" value="val1">text1</button>
    <button id="test2" value="val2">text2</button>
    <button id="test3" value="val3">text3</button>
    <button id="test4" value="val4">text3</button>
</div>

위와 같은 코드가 있을때,

$("#btnDiv>button")로 접근하면, 길이가 4인 버튼 배열을 가져온다.

이때 저런 배열을 탐색하기 편하게 해주는 함수가 each()다.

 

2. jQuery

$(function(){
    $("#btnDiv>button").each(function(index, obj){
        console.log(index);
        console.log(obj);
    })
});

each로 사용하면 첫번째로 index, 두번째로 객체를 전달해준다.

index는 배열의 순서대로 0에서 3까지 나오게 된다.

obj는 button 태그 전체를 반환한다.

each 실행 결과

그래서 인덱스별로, 객체별로 접근하기가 좀 더 편해진다.