[jQuery] each와 index의 간단설명

우선, each를 이해하기 위해서는 index 할당에 대하여 이해해야 한다.

각 브라우저의 HTML트리를 보시면 아시겠지만, 코드에 맞게 트리형식의 구조를 띄고 있다.

각 리스트는 index라는 값을 차례대로 할당받게 되는데,

$(this).index()

등의 방법으로 확인이 가능하다.

each는 기본적으로 반복문형태의 메소드 집합이며, 트리구조에 맞게 할당된 index를 가지고 제어한다고 보면 된다.

가나다라
마바사아
자차카타

$('li').each(function(){ //반복문 조건자 선택 부분 (특징은 노드 갯수만큼 알아서 반복!)
$(this).css('color','red'); //반복문 내용 처리 부분
});

위와 같이 단순히 "li"태그에 대하여 css를 제어하는등의 반복문이 가능하며,

$('li').each(function(index,item){ //반복문 조건자 선택 및 인자값 이름 선언
$(item).text(index); //인자값 활용
});

처럼 each의 기본 인자값을 활용 할 수도 있다. (좀 더 바람직한 방법)

아직까지는 기본적인 반복문형태의 처리가 필요할때만 사용하긴하는데, 보다 많은 응용방법이 있을것 같다.