728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220422/jquery6.html -->
<html>
<head>
<meta charset="UTF-8">
<title>each 함수</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
let arr=[
{name:"KIC", link:"http://kiccampus.co.kr"}, //=> 객체
{name:"다음", link:"http://www.daum.net"},
{name:"네이버", link:"http://www.naver.com"},
{name:"구글", link:"http://www.google.com"},
]
let output = ""
$.each(arr,function(i, item){ //i:인덱스, item:객체
output += "<a href='" + item.link + "'>"
output += "<h3>" + (i + 1) + "." + item.name + "<h3></a>"
})
//#arr : id=arr인 태그
//html() : innerHTML 기능의 함수
$("#arr").html(output)
})
</script>
</head>
<body>
<div id="arr">
</div>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 21. Jquery attr 함수 (0) | 2022.04.25 |
|---|---|
| [Jquery] 21. Jquery css 함수 (0) | 2022.04.25 |
| [Jquery] 21. Jquery 반복문 (nth-child, odd, even, $.each(), let colors = []) (0) | 2022.04.22 |
| [Jquery] 21. Jquery table 태그 다루기(nth-child, tr:first, tr:last, tr:eq) (0) | 2022.04.22 |
| [Jquery] 21. Jquery 선택자 사용 (0) | 2022.04.22 |