SeouliteLab

jQuery의 .index() 메소드: 요소의 순서 가져오기 본문

프로그래밍

jQuery의 .index() 메소드: 요소의 순서 가져오기

Seoulite Lab 2024. 4. 9. 08:35

.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
'프로그래밍' Related Articles more