each와 index 의 간단설명

jQuery 2015. 5. 4. 02:38

728x90
반응형

제이쿼리의 .each() 메서드는 일반적인 반복함수이다.

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

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

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

1
$(this).index()
cs

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


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

1
2
3
4
5
<ul>
    <li>가나다라</li>
    <li>마바사아</li>
    <li>자차카타</li>
</ul>
cs


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


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


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


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

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


each 와 index 의 간단설명

출처 : http://sharphail.tistory.com/43


반응형