Javascript & JQuery & CSS

1. each()
$.each(배열객체, function(index,item){});

배열객체의 모든 요소에서 function을 수행하고 index에는 배열의 인덱스가 전달되고 item에는 배열의 데이터가 전달됩니다.

배열객체가 아닌 일반객체를 적용하면 객체 모든 속성과 값이 전달됩니다.
 

			var str = '';
			var ar = [{name:'sun', team:'KIA'},
			   {name:'ryu', team:'SAMSUNG'},
			   {name:'lee', team:'SK'},
			   {name:'yang', team:'LOTTE'},
			   {name:'KIM', team:'DUSAN'}];
	   
			$.each(ar, function(index, item) {
				str +=item.name+' : '+item.team + "\n\r";
			});

			alert(str);

 위 예제를 보면 ar 배열객체에 데이터를 넣었습니다. 

ar = { name:'sun',team:'KIA' } , {name:'ryu', team:'SAMSUNG'} ,...

ar 은 배열객체가 되고, 데이터는 name = 'sun' , team = 'KIA' 가 됩니다. 이런경우 배열을 처음부터 끝까지 순차적으로

탐색하고자 할때 사용하는 메소드는 each 입니다.


$.each(ar, function(index, item) { /* 처리로직 */ });

each() 메소드는 위와 같은 형태로 사용이 가능합니다.

첫번째 인자 ar 은 배열객체가 들어가고 , 두번째 인자에는 function() 이 수행이 되는데요,

이때 인자값(index , item) 이 두개가 넘어오게 되는데, index 는 배열의 index 값이 되고, item 은 배열의 데이터(name, team)가 됩니다.

데이터 출력은 item.name , item.team 과 같은 형식으로 데이터 값을 뽑을 수가 있습니다.

버튼을 눌러 보시면 아시겠지만, 배열에 있는 데이터가 alert 으로 표시가 되는걸 확인 할 수 있습니다.


그럼, index 를 이용한 두번째 테스트 소스를 보시겠습니다.
 

			var str = '';
			$('li').each(function(index, item){
				$(item).css('font-size',(index+1)*8);
			});

  클릭해 보시면 AAA,BBB,CCC,.... 내용이 <li> </li> 태그 안에 입력되어 있습니다.

each() 함수를 이용해서 li 객체를 순차적으로 접근하여 item(li) 값 css 를 변경하게 됩니다.

index :0 index : 1 , index :2 값으로 변경이 되어 function 을 수행하게 되겠지요????

이것으로 each 함수를 이용해서 객체에 접근하는 방법에 대해서 알아 보았습니다.