<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열 관련 메서드</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function() {
// 객체를 여러 개 담을 때 배열([])을 주로 사용한다.
// obj 배열을 선언한다. int[] arr = {12,4,54,32}, ArrayList 클래스를 사용해서 객체들을 저장한다.
var obj = [ //변수에 담는다 (var : 자료형이 없어 var를 쓴다.)
{'local':'서울'}, //key:value
{'area':'경기도'},
{'area':'제주도'}
]
//each 메서드는 오브젝트 에 있는 것들을 순번에 맞게 순차적으로 꺼내온다.
$(obj).each(function(i,arr) {
console.log(i+':',arr); // 왼쪽에 있는 매개변수부터 차례차례 콘솔에 출력한다.
});
// 1. 출력할 배열을 선택
// 2. each 메서드 선언
// - each() 메서드의 역할 : (for문을 사용하지 않아도) obj 배열 요소(원소)의 데이터 개수만큼
// 반복하면서 익명함수(=function)를 실행시킨다.
// 3. 배열 요소의 원소의 데이터는 arr에 저장됨
// - arr:임의의 변수명 , 배열 요소의 순번은 i에 저장되고 객체는(배열의 데이터) arr에 저장된다.
// ※※※위에는 배열객체가 없어 객체를 선언하고 시작함
console.log('====each END====');
// ※※※ 배열객체가 body(웹 브라우저에 등록이 되어있어) 안에 있어 객체 선언 X
$.each($('#menu1 li'), function(i, arr) { // arr에 시작태그,웹컨텐츠,끝태그까지 포함됨
console.log(i+':',arr);
});
console.log('====each END2====');
$.each($('#menu2 li'), function(i,arr) {
console.log(i+':',arr);
});
console.log('====each END3====');
$.each($('ul li'), function(i, arr) {
console.log((i+1)+':',arr);
});
console.log('====each END4====');
// 순번을 가져오는 index
// Scanner sc = new Scanner(System.in); -> $() 와 동일
// sc -> $('#menu1 li') 이 된다.
// sc.nextInt(); -> $('#menu1 li').index($('li:nth-child(3)')); 와 동일
// index() 는 지정한 요소의 순번(index)를 얻어 온다.
// #menu1 li 로 선택한 요소 4개 중에 3번째에 해당하는 요소의 인덱스 번호를 얻어온다.
var result = $('#menu1 li').index($('li:nth-child(3)')); //대입 연산자로 값을 담아야한다.
console.log('인덱스 번호 '+ result);
console.log('===index END===');
});
</script>
</head>
<body>
<!-- HTML에서 웹컨텐츠를 연속적으로 작성하면 배열로 등록된다. -->
<ul id="menu1">
<li>menu1-1</li>
<li>menu1-2</li>
<li>menu1-3</li>
<li>menu1-4</li>
</ul>
<ul id="menu2">
<li>menu2-1</li>
<li>menu2-2</li>
<li>menu2-3</li>
</ul>
</body>
</html>