Array managing - each() 메서드

each() 메서드 사용의 2가지 형태

유틸리티 함수 형태

							$.each(object, function(index, item) {
								// Code ....
							});
						

일반 메서드 형태

							$(selector).each(function(index, item) {
								// Code ....
							});
						

예제 1 - 자바스크립트 배열 관리

							$(document).ready(function(){
									// 변수 선언 - 배열의 각 요소는 객체임.
									var array = [
										{name: 'Hanbit Media', link:'http://hanb.co.kr'},
										{name: 'Naver', link:'http://naver.com'},
										{name: 'Daum', link:'http://daum.net'},
										{name: 'Paran', link:'http://paran.com'}
									];

									$.each(array, function (index, item) {
										// each 메서드의 콜백함수 내 변수 저장
										var output = '';

										// 문자열 만들기
										output += '';
										output += ' '+item.name+'';
										output += '';

										// 내용 출력
										var txtPane = document.getElementById("txtPane");
										txtPane.innerHTML += output;
									});
								});
						


예제 2 - jquery 배열 객체 관리

jQuery의 배열 객체는 따로 만들어 지는 것이 아니라 선택자를 사용해 여러 개의 문서 객체를 선택할 때 생성됩니다.
아래의 ul li를 선택자로 가져오게 되면 li는 각각 jquery 배열 객체의 요소가 됩니다.
즉 선택자를 사용해서 객체를 선택하면 jQuery는 객체의 배열을 반환하게 됩니다.

  • item -01
  • item -02
  • item -03
  • item -04
  • item -05

						$(document).ready(function(){
							$("#txtPane2 ul li").each(function  (index, item) {
								$(this).addClass('highlight_'+index);
							});
						});
						

참고로 자주 사용하는 방법은 아니지만 addClass() 메서드의 매개 변수에 아래와 같이 함수를 입력할 수 있습니다.
addClass() 메서드 이외에도 대부분의 jQuery 메서드들은 이와 같은 특성이 있습니다.

  • item -01
  • item -02
  • item -03
  • item -04
  • item -05

						$(document).ready(function(){
							$("#txtPane3 ul li").addClass(function (index) {
								return 'high_light_'+index;
							});
						});