자바스크립트에서 배열에 들어 있는 내용을 HTML 페이지에 표시하기 위해서 $,each 메소드를 사용하는 법을 봅시다.
다음과 같이 array를 선언후 for문처럼 사용하는 $.each 메소드를 통해서 모든 name과 link 항목을 innerHTML 시키는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src = "jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
var array = [
{name: 'hanbit', link: 'http://hanb.co.kr'},
{name: 'daum', link: 'http://daum.net'},
{name: 'naver', link: 'http://naver.com'}
]
$.each(array, function(index, item){
var output = '';
output += '<a href="' + item.link +'">';
output += ' <h1>' + item.name +'</h1>';
output += '</a>';
document.body.innerHTML += output;
});
});
</script>
</head>
<body>
</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 |