Notice
Recent Posts
Recent Comments
Link
SeouliteLab
jQuery의 .each() 메소드: 요소를 순회하며 작업하기 본문
.each() 메소드란?
jQuery의 .each() 메소드는 요소의 집합을 반복하면서 각 요소에 대해 지정된 작업을 수행합니다. 이를 통해 배열, 객체 또는 jQuery 객체의 요소들을 순회하며 작업할 수 있습니다.
예제로 배우는 .each() 메소드 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .each() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul id="fruits">
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul>
<script>
$(document).ready(function(){
$('#fruits li').each(function(index, element){
console.log(index + ': ' + $(element).text());
});
});
</script>
</body>
</html>설명
위 예제에서는 #fruits 아이디를 가진 <ul> 요소의 자식 <li> 요소들을 순회하면서 각 요소의 텍스트를 콘솔에 출력하는 간단한 예제를 보여줍니다.
.each()메소드는 선택한 요소의 집합을 반복합니다. 이때 각 요소에 대해 콜백 함수가 호출됩니다.- 콜백 함수의 첫 번째 매개변수는 인덱스(index)이고, 두 번째 매개변수는 요소(element)입니다.
- 콜백 함수 내에서
$(element)를 통해 현재 요소에 접근할 수 있습니다. - 이 예제에서는 각 요소의 인덱스와 텍스트를 콘솔에 출력하고 있습니다.
.each() 메소드를 사용하면 jQuery를 통해 선택한 요소들을 순회하면서 다양한 작업을 수행할 수 있습니다. 이를 통해 요소들에 대한 반복적인 작업을 간편하게 처리할 수 있습니다.
'프로그래밍' 카테고리의 다른 글
| jQuery의 .index() 메소드: 요소의 순서 가져오기 (0) | 2024.04.09 |
|---|---|
| jQuery의 .get() 메소드: 데이터 가져오기 (0) | 2024.04.09 |
| jQuery의 .wrapInner() 메소드: 내부 요소 감싸기 (0) | 2024.04.08 |
| jQuery의 .wrapAll() 메소드: 여러 요소를 감싸기 (0) | 2024.04.08 |
| jQuery의 .wrap() 메소드: 요소 감싸기 (0) | 2024.04.08 |