each() 메서드는 선택한 요소에 대한 반복 작업을 수행하는 데 사용되는 메서드입니다. 선택한 요소 각각에 대해 함수를 실행할 수 있으며, 요소와 해당 인덱스에 대한 처리를 수행합니다.
사용법
$(selector).each(function(index, element) {
// 반복할 작업 수행
});
-selector: 요소를 선택하기 위한 jQuery 선택자입니다.
-function(index, element): 각 요소에 대해 실행되는 콜백 함수입니다.
-index: 현재 요소의 인덱스 (0부터 시작).
-element: 현재 요소에 대한 참조.
기본 예제
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
</ul>
<script>
// ul 요소 내의 li 요소를 반복하며 각 li 요소의 텍스트를 출력
$("ul li").each(function(index, element) {
// index는 현재 요소의 인덱스, element는 현재 요소에 대한 참조
console.log("인덱스: " + index + ", 텍스트: " + $(element).text());
});
</script>
</body>
</html>
ul 요소 내의 각 li 요소를 반복하고 각 li 요소의 텍스트 내용을 콘솔에 출력합니다. each() 메서드를 사용하여 요소를 반복하고 각 요소에 대한 처리를 쉽게 수행할 수 있습니다.
다양한 each() 메서드 활용법
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
</ul>
<!-- 객체 정보 출력 -->
<div id="output"></div>
<!--라디오 -->
<p>
<label><input type="radio" class="radio" name="gender" value="male"> 남성</label>
<label><input type="radio" class="radio" name="gender" value="female"> 여성</label>
<label><input type="radio" class="radio" name="gender" value="other"> 기타</label>
<button id="checkSelection">선택 확인</button>
</p>
<!--체크박스-->
<p>
<label><input type="checkbox" class="checkbox"> 체크박스 1</label>
<label><input type="checkbox" class="checkbox"> 체크박스 2</label>
<label><input type="checkbox" class="checkbox"> 체크박스 3</label>
<button id="checkStatus">상태 확인</button>
</p>
<div class="box">상자 1</div>
<div class="box">상자 2</div>
<div class="box">상자 3</div>
<div class="box">상자 4</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// ul 요소 내의 li 요소를 반복하며 각 li 요소의 텍스트를 출력
$("ul li").each(function(index, element) {
// index는 현재 요소의 인덱스, element는 현재 요소에 대한 참조
console.log("인덱스: " + index + ", 텍스트: " + $(element).text());
});
// 객체 정의
var person = {
name: "홍길동",
age: 30,
occupation: "개발자"
};
// 객체의 속성을 반복하며 정보 출력
$.each(person, function(key, value) {
$("#output").append(key + ": " + value + "<br>");
});
// 배열 정의
var fruits = ["사과", "바나나", "체리", "딸기"];
// 배열의 각 항목을 반복하며 텍스트를 출력
$.each(fruits, function(index, item) {
console.log("인덱스: " + index + ", 텍스트: " + item);
});
$("#checkSelection").click(function() {
$(".radio").each(function(index, element) {
var isSelected = $(element).prop("checked");
var value = $(element).val();
console.log("라디오 버튼 " + (index + 1) + " (값: " + value + "): " + isSelected);
});
});
$("#checkStatus").click(function() {
$(".checkbox").each(function(index, element) {
var isChecked = $(element).prop("checked");
console.log("체크박스 " + (index + 1) + ": " + isChecked);
});
});
$(".box").each(function(index, element) {
$(element).css({
"background-color": "lightblue",
"color": "white",
"font-weight": "bold"
});
});
</script>
1. 리스트 항목 출력 - $("ul li").each(...)
-페이지의 리스트 항목을 선택하고 각 항목의 텍스트와 인덱스를 출력합니다.
2. 객체 속성 출력 - $.each(person, ...)
-JavaScript 객체의 각 속성을 반복하여 각 속성의 이름과 값을 출력합니다.
3. 배열 항목 출력 - $.each(fruits, ...)
-JavaScript 배열의 각 항목을 반복하여 각 항목의 인덱스와 값을 출력합니다.
4. 라디오 버튼 선택 확인 - $(".radio").each(...)
-라디오 버튼 그룹을 선택하고 각 라디오 버튼의 선택 상태와 값을 출력합니다.
5. 체크박스 상태 확인 - $(".checkbox").each(...)
-체크박스를 선택하고 각 체크박스의 체크 상태를 출력합니다.
6. 상자 요소 스타일 적용 - $(".box").each(...)
-페이지의 상자 요소를 선택하고 각 상자에 스타일을 적용하여 배경색, 글자색, 글자 굵기를 변경합니다.
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] Air Datepicker 사용방법, 예제 (날짜 선택) (0) | 2023.10.31 |
|---|---|
| [jQuery] append(), prepend() 메서드 사용법, 예제 (HTML 구조변경) (0) | 2023.10.27 |
| [jQuery] select 선택 값 가져오고 변경하기, option 추가하고 확인하기 (0) | 2023.10.12 |
| [jQuery] radio, checkbox 체크 값 가져오기, 확인하기, 선택하기 (0) | 2023.10.11 |
| [jQuery] remove(), empty() 메서드 사용방법, 예제 (요소 제거와 내용 비우기) (0) | 2023.09.25 |
댓글