JavaScript, Java에서는 반복문으로 for을 사용했다. jQuery에서는 each도 사용할 수 있다.
jQuery의 each 반복문
형식) $.each(배열, function(){})
형식) $(배열).each(function(){})<!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: #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
$("li").each(function(){
let result = $(this).text();
alert(result);
}); //each() end
}); //click end
</script>
</body>
</html>$("li").each(function(){
let result = $(this).text();
alert(result);
}); //each() endfunction 안의 코드를 반복한다.
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
'웹개발 교육 > jQuery' 카테고리의 다른 글
| [42일] jQuery (8) - 요소 생성 (0) | 2022.09.26 |
|---|---|
| [42일] jQuery (7) - this (0) | 2022.09.26 |
| [42일] jQuery (5) - 속성 관련 메소드 (0) | 2022.09.26 |
| [42일] jQuery (4) - css 메소드 (0) | 2022.09.26 |
| [42일] jQuery (3) - text()와 html() (0) | 2022.09.26 |
JavaScript, Java에서는 반복문으로 for을 사용했다. jQuery에서는 each도 사용할 수 있다.
jQuery의 each 반복문
형식) $.each(배열, function(){})
형식) $(배열).each(function(){})<!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: #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
$("li").each(function(){
let result = $(this).text();
alert(result);
}); //each() end
}); //click end
</script>
</body>
</html>$("li").each(function(){
let result = $(this).text();
alert(result);
}); //each() endfunction 안의 코드를 반복한다.
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
'웹개발 교육 > jQuery' 카테고리의 다른 글
| [42일] jQuery (8) - 요소 생성 (0) | 2022.09.26 |
|---|---|
| [42일] jQuery (7) - this (0) | 2022.09.26 |
| [42일] jQuery (5) - 속성 관련 메소드 (0) | 2022.09.26 |
| [42일] jQuery (4) - css 메소드 (0) | 2022.09.26 |
| [42일] jQuery (3) - text()와 html() (0) | 2022.09.26 |
