배열 생성 및 초기화
var fourSeason = ['spring', 'summer', 'autumn', 'winter'];배열 요소 순회 each() 메소드
$.each(fourSeason, function(i){ // i : 배열 인덱스
console.log(i, fourSeason[i]);
})
$.each(fourSeason, function(i, elem){ // i : 배열 인덱스, elem : 배열 요소
console.log(i, elem);
})
/*
<ol>
1. spring <li>spring</li>
2. summer <li>summer</li>
3. autumn <li>autumn</li>
4. winter <li>winter</li>
</ol>
*/
var ol = $('<ol>');
$.each(fourSeason, function(i, elem){
ol.append($('<li>').text(elem));
})
$('#box1').append(ol);[09_array.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../assets/js/lib/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box1"></div>
<script>
// 배열 생성 및 초기화
var fourSeason = ['spring', 'summer', 'autumn', 'winter'];
// 배열 요소 순회 each() 메소드
$.each(fourSeason, function(i){ // i : 배열 인덱스
console.log(i, fourSeason[i]);
})
$.each(fourSeason, function(i, elem){ // i : 배열 인덱스, elem : 배열 요소
console.log(i, elem);
})
/*
<ol>
1. spring <li>spring</li>
2. summer <li>summer</li>
3. autumn <li>autumn</li>
4. winter <li>winter</li>
</ol>
*/
var ol = $('<ol>');
$.each(fourSeason, function(i, elem){
ol.append($('<li>').text(elem));
})
$('#box1').append(ol);
</script>
<hr>
<div id="box2"></div>
<script>
// 배열 생성 및 초기화
var people = [
{
'name': 'alice',
'age': 30,
'mobile': '010-0000-0000'
},
{
'name': 'james',
'age': 40,
'mobile': '010-1111-1111'
}
]
/*
<table border="1">
<thead>
<tr>
<td>이름</td><td>나이</td><td>연락처</td>
</tr>
</thead>
<tbody>
<tr><td>alice</td><td>30</td><td>010-0000-0000</td></tr>
<tr><td>james</td><td>40</td><td>010-1111-1111</td></tr>
</tbody>
</table>
*/
// <table> 태그를 jQuery 객체로 만들기
var table = $('<table>').attr('border', 1);
// <thead> 태그는 문자열로 전달해서 저장
table.append('<thead><tr><td>이름</td><td>나이</td><td>연락처</td></tr></thead>');
// <tbody> 태그 만들기
var tbody = $('<tbody>');
$.each(people, function(i, elem){
var tr = $('<tr>');
tr.append($('<td>').text(elem.name));
tr.append($('<td>').text(elem.age));
tr.append($('<td>').text(elem.mobile));
tbody.append(tr);
})
// <table>에 <tbody> 태그 넣기
table.append(tbody);
// box2에 <table> 넣기
$('#box2').append(table);
</script>
<hr>
<div id="box3"></div>
<script>
// 배열 생성 및 초기화
var site = [
{
'host': '네이버',
'url': 'https://www.naver.com/',
'target': '_blank'
},
{
'host': '구글',
'url': 'https://www.google.com/',
'target': '_self'
}
]
/*
<ul>
<li><a href="https://www.naver.com/" target="_blank">네이버</a></li>
<li><a href="https://www.google.com/" target="_self">구글</a></li>
</ul>
*/
// <ul> 태그를 jQuery 객체로 만들기
var ul = $('<ul>');
// site 배열 순회하면서 <li><a> 태그 만들어 넣기
$.each(site, function(i, elem){
var li = $('<li>');
li.append($('<a>').attr('href', elem.url).attr('target', elem.target).text(elem.host));
ul.append(li);
})
// 완성된 <ul> 태그를 box3에 넣기
$('#box3').append(ul);
</script>
<hr>
<div id="box4">
<ul>
<li class="movies">터미네이터</li>
<li class="movies">아바타</li>
<li class="movies">에일리언</li>
<li class="movies">스타워즈</li>
<li class="movies">로보캅</li>
</ul>
</div>
<script>
// class="movies"인 요소를 var movies 배열로 만들기
// 비어 있는 배열 생성
var movies = [];
// class="movies" 요소를 순회하면서 내부 텍스트를 꺼내고, 배열에 저장하기
$.each($('.movies'), function(i, elem){
movies.push($(elem).text());
})
// 확인
console.log(movies);
</script>
<hr>
<div id="box5">
<select id="region">
<option value="02">서울</option>
<option value="031">경기</option>
<option value="032">인천</option>
</select>
</div>
<script>
// id가 region인 요소를 배열로 만들기
/*
var region = [
{
'name': '서울',
'tel': '02'
},
...
]
*/
// 비어 있는 배열 생성
var region = [];
// id="region" 요소를 순회하면서 내부 텍스트와 value 속성을 꺼내고, 배열에 저장하기
$.each($('#region > option'), function(i, elem){
// 비어 있는 객체 obj 생성
var obj = {};
// 객체 obj에 속성(프로퍼티) 저장
obj.name = $(elem).text();
obj.tel= $(elem).val();
// 객체 obj를 배열에 저장하기
region.push(obj);
})
// 확인
console.log(region);
</script>
</body>
</html>
졸려요