index() 예제 - 클릭한 요소가 형제 요소 중 몇 번째인지 반환.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li").click(function(){
alert($(this).index());
});
});
</script>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
결과보기
index() 정의
다른 지정된 요소를 기준으로 지정된 요소의 색인 위치 반환. (색인은 0부터 시작.)
1.
요소는 jQuery 선택자 또는 DOM 요소로 지정 가능.
2.
요소 못 찾으면, index()는 -1 반환.
3.
Tab 만들 때 유용. https://sir.kr/qa/362593
index() 구문
지정 선택자가 형제 요소 중 몇 번째 요소인지 반환. (예제1)
$(selector ).index()
지정 선택자 중 관련 요소가 몇 번째 요소인지 반환. (예제2)
$(selector ).index(element )
[매개변수]
element
선택. 색인번호 얻고자 하는 요소 지정.
(DOM 요소 또는 jQuery 선택자 가능.)
index() 예제2 - .hz 클래스 가진 요소 중 id=js 가진 요소가 몇 번째인지 반환.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($(".hz").index($("#js")));
});
});
</script>
<button>클릭</button>
<ul>
<li>HTML</li>
<li class="hz">CSS</li>
<li class="hz" id="js">JS</li>
</ul>
결과보기 (※ 결과값: 1)
