(jquery) 배열 관리

배열 관리

배열을 관리할 때, each() 메서드를 사용

each() 메서드 : 매개변수로 입력한 함수로 for in 반복문처럼 객체나 배열의 요소를 검사하는 메서드

1. $.each(object, function(index, item){})
2. $(selector).each(function(index, item){})

자바스크립트 배열 관리

$(document).ready(function() {

	// 변수를 선언합니다.
	var array = [
		{ name: 'Hanbit Media', link: 'http://hanbit.co.kr' },
		{ name: 'Naver', link: 'http://naver.com' }
		{ name: 'Daum', link: 'http://daum.net' }
	];

	// $.each() 메서드를 사용합니다.
	$.each(array, function (index, item) {
		// 변수를 선언합니다.
		var output = '';

		// 문자열을 만듭니다.
		output += '<a href="' + item.link + '">';
		output += '    <h1>' + item.name + '</h1>';
		output += '</a>';

		// 집어넣습니다.
		document.body.innerHTML += output;
	}	
});

매개 변수 index : 배열의 인덱스 또는 객체의 키를 의미
매개 변수 item: 해당 인덱스나 키가 가진 값을 의미

jQuery 배열 관리

addClass() 메서드, removeClass() 메서드 : 문서 객체에 class 속성을 추가/제거 하는 메서드

	$(document).ready(function() {
		$('h1').addClass('high-light');
	});

each() 메서드를 사용한 서로 다른 클래스 적용

$(document).ready(function() {
	$('h1').each(function(index, item) {
		$(item).addClass('high-light-' + index);
	});
});

each() 메서드의 매개변수로 입력한 함수 안에서 this 키워드와 item은 의미가 같습니다.

each() 메서드에서의 this 키워드

$(document).ready(function() {
	$('h1').each(function(index, item) {
		$(this).addClass('high-light-' + index);
	});
});