[제이쿼리] jQuery each (jQuery 반복문)

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

 

}

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

 

제이쿼리에서는 each함수가 있다.

.each(function(index, element))

 

$('div').each

.each 앞에 셀렉터를 정의할 수 있다.

 

1. function

1번의 반복문마다 실행될 익명함수 이다.

 

2. index

현재 반복문의 횟수를 알수있는 인덱스 i라고 생각하면 된다.

 

3. element

현재 반복문에서 셀렉트되는 엘리먼트 e이며 익명함수 내에서 $(element)로 셀렉트 할 수 있다.

제외할 수 있으며 element 대신 this를 사용할 수 있다.

 

<div>

<li>첫번쨰</li>

<li>두번째</li>

<li>세번째</li>

</div>

 

div 태그안에 li태그가 3개 있다.

each함수로 li의 텍스트를 가져와 보자.

 

 

ex) 1-1. DOM의 반복

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

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

});

 

//결과

첫번째

두번째

세번째

 

console.log(i);

 

//결과

0

1

2

 

this = e 라고 생각하면된다. each의 핵심은 셀렉터 이다. 셀렉터 기준으로 반복하는 것이다.

 

ex) 1-2 .

$('li').each(function(){

 

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

 

});

 

 

//결과

첫번째

두번째

세번째

 

 

 

ex) 2. 배열 Array의 반복

 

$.each([ 1, 2 ], function( index, value ) {

    console.log( index + " : " + value );

 

});

 

//결과

0 : 1

1 : 2

 

ex) 3. object의 반복

 

var obj = { "subject" : "제목" , "content" : "내용" }; 

 

$.each(obj , function(index, key){  // 보통 ajax의 json data를 가공할때 많이 쓴다.

 

console.log(key.subject); //제목

console.log(key.content); //내용

 

}