정의

제이쿼리의 index()를 바닐라 자바스크립트로 구현하는 방법이다.

HTML

<ul id="ul">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

javascript

var ul = document.getElementById('ul'),
    li = ul.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
    (function(idx) {
        li[idx].onclick = function() {
            alert(idx);
        }
    })(i);
}

결과

아래 리스트 요소를 클릭하면 인덱스가 alert에 출력되는 것을 확인할 수 있다.

See the Pen Untitled by recordboy (@recordboy) on CodePen.