Notice
Recent Posts
Recent Comments
Link
SeouliteLab
jQuery의 .index() 메소드: 요소의 순서 가져오기 본문
.index() 메소드란?
jQuery의 .index() 메소드는 선택한 요소가 형제 요소 중에서 몇 번째 요소인지를 반환합니다. 이를 통해 특정 요소의 순서를 파악할 수 있습니다.
예제로 배우는 .index() 메소드 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .index() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.item {
padding: 10px;
margin: 5px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<ul>
<li class="item">항목 1</li>
<li class="item">항목 2</li>
<li class="item">항목 3</li>
</ul>
<script>
$(document).ready(function(){
$('.item').click(function(){
var index = $(this).index();
alert('선택한 요소의 순서는 ' + index + '입니다.');
});
});
</script>
</body>
</html>설명
위 예제에서는 .index() 메소드를 사용하여 클릭한 요소가 형제 요소 중에서 몇 번째 요소인지를 알아냅니다.
- .index() 메소드를 호출할 때 매개변수를 지정하지 않으면 선택한 요소의 형제 요소 중에서의 순서를 반환합니다.
- 이 예제에서는 클릭 이벤트가 발생했을 때 클릭된 요소의 순서를 알아내고, 알림창으로 표시합니다.
.index() 메소드를 사용하면 jQuery를 통해 선택한 요소의 순서를 쉽게 파악할 수 있습니다. 이를 활용하여 요소의 순서에 따라 동적으로 작업을 수행할 수 있습니다.
'프로그래밍' 카테고리의 다른 글
| jQuery.param() 메소드: 객체를 쿼리 문자열로 변환하기 (0) | 2024.04.09 |
|---|---|
| jQuery.noConflict() 메소드: jQuery 충돌 회피하기 (0) | 2024.04.09 |
| jQuery의 .get() 메소드: 데이터 가져오기 (0) | 2024.04.09 |
| jQuery의 .each() 메소드: 요소를 순회하며 작업하기 (0) | 2024.04.09 |
| jQuery의 .wrapInner() 메소드: 내부 요소 감싸기 (0) | 2024.04.08 |