배열관리_each()
- 자바스크립트 환경에서는 배열을 each()로 관리한다.
- Javascript에서는 배열리터럴로 지정하여 배열을 생성한다.
- JQuery에서는 셀렉터로 여러 객체를 선택해 배열을 생성한다.
(1) $.each() : object와 배열의 length가 기준인 일반적인 반복문.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
var array = [
{name:'Daum', link:'http://daum.net'},
{name:'Naver', link:'http://naver.com'}
];
$.each(array, function(index, item) {
var res = "";
res += '<a href="' + item.link + '">';
res += ' <h1>' + item.name + '</h1>';
res += '</a>';
document.body.innerHTML += res;
});
</script>
| cs |
1. array라는 배열리터럴을 만들고 name과 link 속성을 가짐.
2. each()함수의 첫 파라미터가 배열이므로 function은 인덱스와 값을 가짐.
3. res에 html태그들을 넣고 innerHTML로 body에 붙임.
4. Daum과 Naver가 화면에 보이며 누르면 링크따라감.
(2) $(selector).each() : 셀렉터로 객체들을 가져오는 DOM에 대한 반복문.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<html>
<head>
<style>
.color0 {background: orange;}
.color1 {background: green;}
.color2 {background: pink;}
.color3 {background: lightgrey;}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8">
$('h1').each(function(index, item) {
$(this).addClass('color' + index);
});
});
</script>
</head>
<body>
<h1>item 0</h1>
<h1>item 1</h1>
<h1>item 2</h1>
<h1>item 3</h1>
</body>
</html>
| cs |
1. body에 <h1>태그 4개를 만들고 style에 클래스 4개 만듬
2. $(selector)의 셀렉터 부분은 'h1'을 써줌
3. h1태그에 해당하는 4개 객체가 배열화되고, 이때 this는 item 의미.
4. addClass()는 문서객체에 class를 추가하는 메소드이다.
5. 클래스이므로 function을 만들어 return값을 가질 수도 있다.
6. h1태그에 style클래스들이 적용되어 순서대로 화면에 뜬다.
댓글 없음:
댓글 쓰기