[jQuery] .each() (jQuery 반복문)

for(var i=0; i<10; i++){

 

}

위는 자바스크립트의 반복문입니다.

반복문..매우 많이 사용합니다.

동적으로 무언가 뿌려주려고 사용하고

계산할때도 사용하고..두루두루 많이 사용합니다.

jQuery에서도 반복문이 존재하는데요.

이번 포스팅 주제는 jQuery each 함수 소개입니다.

사실 방금전 jQuery XML 파싱을 설명하다 보충설명이 필요하다 느꼇는데 그 부분이 each 함수에 대한 것이었습니다.

그럼 먼저 each에 대한설명을 하고, 그 뒤에 사용법을 설명하겠습니다.

.each(function(index, element))

이번 설명은 색상의 기본인 RGB 순으로 보시면 되겠습니다. :P

$('li').each

셀렉터는 앞에 알맞게 본인이 원하는걸 선택하면 되겠습니다.

1. function

반복문 한 바퀴마다 실행될 익명함수입니다.

2. index

반복문이 몇바퀴 째인지 알 수 있는 인덱스 입니다.

예를 들자면 for 문에서 많이 쓰는 i 의 역활이 되겠네요.

익명함수 내부에서 $(index)로 셀렉트 할 수 있습니다.

사용하지 않을 경우에는 제외하셔도 좋습니다.

3. element

현재 반복문에서 셀렉트되는 엘리먼트를 나타냅니다.

익명함수 내부에서 $(element)로 셀렉트 할 수 있습니다.

사용하지 않을 경우에는 제외하셔도 좋습니다.

또한 element 대신 this를 사용하셔도 됩니다.

설명이 좀 부족한것 같긴한데..더이상의 설명은 생략하겠습니다. 직접 눈으로 보는게 훨씬 빠르고 정확합니다.

바로 마크업과 코드 보시죠.

먼저 마크업입니다.

<div>

    <span>첫번째</span>

    <span>두번째</span>

    <span>세번째</span>

</div>

div 안에 span 태그가 3개가 있네요.

우리는 이제 each 함수로 저 span들의 텍스트를 가지고 올겁니다.

$('div').find('span').each(function(i, e){

    console.log($(this).text());

});

감이 슬쩍 오실랑가요?

라인별로 설명드리겠습니다.

1) 첫번째 셀렉터 div를 기준으로 하위의 span을 찾은 뒤, 반복문(each)을 선언하였습니다.

2) 콘솔창에 span의 수 만큼 반복하여 텍스트를 출력합니다.

결과는 어떻게 나올까요.

첫번째

두번째

세번째

이렇게 나오게 되겠죠?

엄청 간단합니다.

그럼 인덱스(i)를 찍어보면 어떻게나올까요?

0

1

2

예상하신 것처럼 이렇게 나오게 됩니다.

그리고 여기서 익명함수가 발생될때 셀렉터를 보시면 this로 되어있습니다.

this = e 라고 보시면 되겠습니다.

결국 each의 핵심은 셀렉터 입니다.

셀렉터 기준으로 반복하는 것이죠.

예를들어 ul 내부에 li가 10개 있다면 총 반복은 10번 돌게 되는거구요.

100개라면 100번...

너무 당연한 설명을 하는것 같은데 어쩔수없습니다. 진짜 그게다거든요 :D

응용해서 XML 파싱에서 사용해 봅시다.

$.ajax({

    url : "요청경로",

    type : "POST",

    success : function(xml){

         

    }

});

 서버에 요청 후 나온 결과물이 위의 XML 이라고 하였을때, each를 통하여 doc 부분의 텍스트를 가져오겠다 라고하면.

$(xml).find('문서').find('doc').each(function(i, e){

    console.log($(this).text());

});

 이렇게 하시면 됩니다.

따지고보면 엘리먼트나 XML 이나 별차이 없습니다.

그냥 셀렉터만 잘잡으면 그만입니다.

이제 UI 단에서도 일괄적으로 each를 통하여 변경할 수있고..

값도 변경할 수있고..

여러가지 할 수 있습니다.

익명함수 내부에서 발생하는 행위는 성질에맞게 잘 구현하시면 됩니다.

어렵지않은 반복문인데 처음에는 구문이 어색할 수 있으므로 자주 사용해보면 좋을 것 같습니다. :D

출처: http://annotations.tistory.com/59 [Annotation]