⁂ jQuery/: 기본 익히기
[jQuery] #5 each 반복문
김갱환
2022. 9. 26. 15:58
1. 제이쿼리의 each 반복문
이번 게시글에서는 제이쿼리에서 자주 쓰이는 each 반복문을 알아보려한다.
참조 : https://www.w3schools.com/jquery/misc_each.asp
jQuery Misc each() Method
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
each 반복문을 연습해보기 위해 버튼과 공간을 만든 뒤 버튼을 누르면 구구단 7단이 출력되도록 하는 버튼을 만들려한다.
우선 우리가 알고 있는 for문을 사용해서 만들어보려 한다.
1) for문으로 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>06_each반복문.html</title>
<!-- jQuery import -->
<script src="jquery-3.6.1.min.js"></script>
<style>
#displayList {
margin:20px;
width:400px;
height:300px;
background-color: #81d4fa;
padding: 20px;
list-style: none;
}
</style>
</head>
<body>
<h3>each반복문</h3>
<button id="startBtn">7단!</button>
<ul id="displayList"></ul>
<script>
$("#startBtn").click(function(){
let dan = 7;
for(i=1; i<9; i++){
// $("li") <body>에 있는 요소들 중에서 <li> 요소에 접근
// $("<li>") <body>에 새로운 <li> 요소를 생성해라
$("<li>").text(dan + "*" + i + "=" + (dan*i)).appendTo("#displayList");
} // for end
});// click end
</script>
</body>
</html>
2) each문으로 만들기
이번엔 each 반복문을 사용하여 만들어보자.
each 반복문의 형식은 두 가지가 있는 데 둘 중 어느 것을 사용해도 무방하다.
형식) $.each(배열, function(){})
형식) $(배열).each(function(){})$("li").each(function(){
let result=$(this).text();
alert(result);
}); // each() end
이렇게 코드를 작성하면 each문이 이 버튼이 동작하는 각각의 동작마다의 문자열을 호출하게 된다.
