이전에 사용한 $.each 메소드를 통해서 배열을 관리했는데요 이번에는 내부 파라미터인 index와 item을 사용하는 방법을 알아봅시다.
아래소스는 h1으로 item-0부터 4까지 있는데 그것을 high-light-0부터 4까지의 css를 적용하는 소스입니다.
이를 위해서
$('h1').each(function(index, item)에서 수행하는데 여기서 h1은 body 내부의 h1을 의미합니다.
그리고 addClass()를 통해서 css클래스를 적용하게됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</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 = "jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
$('h1').each(function(index, item){
//$(item).addClass('high-light-' + index);
$(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>
실행화면
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - keyup메소드를 이용한 글자수세기프로그램 만들기 (0) | 2014.10.11 |
|---|---|
| jquery - delegate 방법을 사용한 이벤트 연결 범위 한정 (0) | 2014.10.11 |
| jquery - 기본 이벤트를 제거하고 이벤트 전달 막는 법 2가지 (0) | 2014.10.11 |
| jquery - context 객체 활용 예제 (0) | 2014.10.11 |
| jquery - on메소드를 이용한 이벤트 연결 (0) | 2014.10.11 |
| Jquery - $.extend 메소드 사용법 (0) | 2014.09.12 |
| Jquery - $.each 메소드 사용법 (0) | 2014.09.12 |
| jQuery Mobile - Text inputs(텍스트) (0) | 2013.11.22 |