클릭한 요소 index 출력하기

회사에서 퇴근 후 남는 시간에 오랜만에 무언가를 올리고 싶어서 올리게 됩니다.

올리기로 마음 먹은 코드들이 너무 쌓였는데, 간단한것으로 올려보도록 하겠습니다.

클릭한 요소의 엘리먼트,인자(index),배열을 출력해야 할 때가 많은데,

제이쿼리와 바닐라 두 방식으로 한 번 알아보겠습니다.

Jquery

$(".btn").click(function(){
    console.log($('.btn').index(this))
})

다른코드와 다르게 비교적 쉽게 출력할 수 있습니다.

Vanilla1

btns.forEach(function (btn, idx, arr) {
  btn.addEventListener("click", () => {
    console.log(btn) //엘리먼트
    console.log(idx) //index값
    console.log(arr) //배열
  })
})

foreach문을 통해 간단하게 세개의 인자값(element,index,arr)을 넣고 돌려서 쉽게 출력할 수 있습니다.

Vanilla2

for (var i = 0; i < btns.length; i++) {
  function 인자값구해줘(idx) {
    btns[idx].addEventListener("click", () => {
      console.log(idx)
    })
  }
  인자값구해줘(i)
}

foreach문을 쓰지 않아도 할 수 있을까 해서 짜보았는데, 이렇게 기본 for문을 이용해서도 출력이 됩니다.

상황에 따라 어떤방법으로 써야할지가 달라질 수 있다고 생각 하지만, 제이쿼리는 잘 사용하지 않는 추세이므로 생자바스크립트 실력 늘리기에는 좋다고 생각합니다.