$.each
- jQuery 객체 또는 DOM 요소 집합에 사용됩니다. jQuery 객체에 대한 반복 작업을 수행할 때 주로 사용
- jQuery 라이브러리에서 제공하는 함수로, 배열 또는 객체의 각 요소에 대한 반복 작업을 수행하는 데 사용
$.each(collection, function(index, value) {
// 각 요소에 대한 작업 수행
});<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<script>
$(document).ready(function() {
const fruits = ["Apple", "Banana", "Cherry"];
// jQuery의 $.each를 사용하여 배열을 반복
$.each(fruits, function(index, value) {
console.log(`Index: ${index}, Value: ${value}`);
});
// jQuery의 $.each를 사용하여 ul 요소의 자식 li 요소를 반복
$("#fruits li").each(function(index, element) {
console.log(`Index: ${index}, Element: ${$(element).text()}`);
});
});
</script>
</body>
</html>
forEach
- JavaScript의 표준 배열 메서드 중 하나로, 배열의 각 요소에 대한 반복 작업을 수행하는 데 사용
- JavaScript 배열의 각 요소에 대한 반복 작업을 수행할 때 사용
array.forEach(function(value, index) {
// 각 요소에 대한 작업 수행
});<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<script>
document.addEventListener("DOMContentLoaded", function() {
const fruits = ["Apple", "Banana", "Cherry"];
// JavaScript의 forEach를 사용하여 배열을 반복
fruits.forEach(function(value, index) {
console.log(`Index: ${index}, Value: ${value}`);
});
// JavaScript의 forEach를 사용하여 DOM 요소 집합을 반복
const fruitListItems = document.querySelectorAll("#fruits li");
fruitListItems.forEach(function(element, index) {
console.log(`Index: ${index}, Element: ${element.textContent}`);
});
});
</script>
</body>
</html>'Programming > JavaScript' 카테고리의 다른 글
| $.ajax 옵션 (0) | 2023.11.08 |
|---|---|
| 클로저(Closeure) (0) | 2023.11.08 |
| Open API 가져오기 (0) | 2021.08.08 |
댓글