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 의 간단설명
반응형
'jQuery' 카테고리의 다른 글
길이 값을 구하는 메서드들 width, innerWidth, outerWidth (0) | 2015.05.08 |
---|---|
.attr() 메서드와 .prop() 메서드 (0) | 2015.05.05 |
제이쿼리 콜백함수 (0) | 2015.04.28 |
add 메서드 (0) | 2015.04.28 |
[jQueryMobile]swipeleft, swiperight 메서드 (0) | 2015.04.17 |