[Javascript] 자바스크립트(바닐라)에서 요소의 인덱스 구하기

let index = $(this).index();

 

요소의 index를 구하기 위해서 보통 제이쿼리의 이 메소드를 많이 쓰실텐데요, 바닐라로 구현해야 할 상황이 있습니다.

 

<ul id='list'>
    <li onclick='index(this)'>1</li>
    <li onclick='index(this)'>2</li>
    <li onclick='index(this)'>3</li>
    <li onclick='index(this)'>4</li>
    <li onclick='index(this)'>5</li>
</ul>

<script>
	function index(a) {
            var i = 0;
            while((a = a.previousSibling) != null ) {
                i++;
            }
            console.log(i);
        }
</script>

 

 이렇게 코드를 작성하면 클릭한 요소의 index를 콘솔에 출력하게 되는데요, 만약 2번 li를 클릭했다면 콘솔에는 index 번호인 1을 출력하게 됩니다!