jquery each( $.each )

mirinae.maru 0 Comments

■ sample data

<div id="x1" class="c1">aaa</div>
<div id="x2" class="c1">bbb</div>
<div id="x3" class="c1">ccc</div>
<div id="x4" class="c1">ddd</div>
<div id="x5" class="c1">eee</div>

 

■ id로 select후 each순환문 사용

var data = $('#x1, #x2, #x3, #x4, #x5');	// id로 select
$.each( data, function(index,value) {
	console.log( index +"\t" + $(value).html() );
});
---------------------------------
결과 
---------------------------------
0	aaa
1	bbb
2	ccc
3	ddd
4	eee

 

■ class로 select후 each순환문 사용

var data = $('.c1');	// class로 select
$.each( data, function(index,value) {
	console.log( index +"\t" + $(value).html() );
});
---------------------------------
결과 
---------------------------------
0	aaa
1	bbb
2	ccc
3	ddd
4	eee

 

■ each순환문에서 배열 데이터 사용

$.each(['a','b','c','d','e'], function(index,value) {
	console.log( index +"\t" + value );
});
---------------------------------
결과 
---------------------------------
0	a
1	b
2	c
3	d
4	e

 

■ each순환문에서 map 데이터 사용

var mapData = {
	'a1'	: "x1",
	'a2'	: "x2",
	'a3'	: "x3",
	'a4'	: "x4",
	'a5'	: "x5"
}
$.each(mapData, function(key,value){
	console.log( key +"\t"+ value );
});
---------------------------------
결과 
---------------------------------
a1	x1
a2	x2
a3	x3
a4	x4
a5	x5

 

■ each순환문에서 loop 중지 – false를 return하면 each순환문을 중간에 중지할 수 있다.

var mapData = {
	'a1'	: "x1",
	'a2'	: "x2",
	'a3'	: "x3",
	'a4'	: "x4",
	'a5'	: "x5"
}
$.each(mapData, function(key,value){
	console.log( key +"\t"+ value );
	if( value=='x2' ) return false;
});
---------------------------------
결과 
---------------------------------
a1	x1
a2	x2

 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다