note

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

JavaScript/jQuery

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

투한 2012. 3. 20. 10:54 













<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
	.high_light_0{background:Yellow;}
	.high_light_1{background:Orange;}
	.high_light_2{background:Blue;}
	.high_light_3{background:Green;}
	.high_light_4{background:Red;}
	
</style>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
	$(document).ready(function () {
		$('h1').each(function (index,item){
			$(item).addClass('high_light_' + index);
		});
	});
	
</script>
</head>
<body>
	<h1>item - 0</h1>
	<h1>item - 1</h1>
	<h1>item - 2</h1>
	<h1>item - 3</h1>
	<h1>item - 4</h1>
</body>
</html>



each에서 인덱스를 받는데 밑에 <h1>태그가 인덱스가 부여된다

인덱스가 부여될때 each()메소드가 받아 위에 있는 스타일을 적용시킨다









더 많이 사용되는 방법








<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
	.high_light_0{background:Yellow;}
	.high_light_1{background:Orange;}
	.high_light_2{background:Blue;}
	.high_light_3{background:Green;}
	.high_light_4{background:Red;}
	
</style>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
	$(document).ready(function () {
		$('h1').each(function (index,item){
			$(this).addClass('high_light_' + index);
		});
	});
	
</script>
</head>
<body>
	<h1>item - 0</h1>
	<h1>item - 1</h1>
	<h1>item - 2</h1>
	<h1>item - 3</h1>
	<h1>item - 4</h1>
</body>
</html>




item -> this




저작자표시 비영리 변경금지

'JavaScript > jQuery' 카테고리의 다른 글

eq()메서드  (0) 2012.03.21
$extend()메서드  (0) 2012.03.20
addClass() 메서드  (0) 2012.03.20
$.each() 메서드 사용  (0) 2012.03.20
함수 필터 선택자  (0) 2012.03.20
'JavaScript/jQuery' Related Articles more