Javascript&JQuery - $(this).index();

jquery로 현재 클릭한 요소의 인덱스 값을 구하기

// 클릭한 요소의 형제들 중 자신이 몇 번째인지 확인
$(this).index();

// 또는
// 특정 element들 중 자신이 몇 번째인지 확인
$(element).index(this);

현재 클릭한 요소의 부모 요소

function getParentNode(element) {
  return element.parentNode;
}

부모 요소 중 element는 몇 번째 자식인지 찾기

• Array객체의 메서드 중 indexOf() 메서드가 유용

function getElementIndex(element) {
  return [].indexOf.call(element.parentNode.children, element);
}

indexOf는 Array객체의 메서드라서 parentNode.children같은 유사 배열엔 적용되지 않는다.(크롬은 가능 IE 안됨)

mdn을 찾아보면 indexOf 사용법이 이렇게 적혀 있다

.arr.indexOf(searchElement[, fromIndex])

• searchElement
  배열에서 찾을 요소입니다.

• fromIndex Optional
  검색을 시작할 색인입니다.
  인덱스가 배열의 길이보다 크거나 같은 경우 -1이 반환되므로 배열이 검색되지 않습니다.
  제공된 색인 값이 음수이면 배열 끝에서부터의 오프셋 값으로 사용됩니다.
  참고 : 제공된 색인이 음수이면 배열은 여전히 앞에서 뒤로 검색됩니다.
  계산 된 인덱스가 0보다 작 으면 전체 배열이 검색됩니다. 기본값 : 0 (전체 배열 검색).

• 반환 값
  배열 내의 요소의 최초의 인덱스. 발견되지 않으면 -1.

여기서 우린 arr부분을 call로 element.parentNode.children로 바꿔주었다.
그다음으로 추가해야할 부분은 특정 element들중 자신이 몇 번째 element인지 확인해야하는 부분이다.

function getElementIndex(element, range) {
  // 추가
  if (!!range) return [].indexOf.call(element, range);
  return [].indexOf.call(element.parentNode.children, element);
}

getElementIndex함수에 인자를 하나 추가했다.
찾고자 하는 element(range)를 추가해서 그것들 중 element는 몇 번째 인지 확인한다.
range 인자가 있을 때만 적용되게 하기 위해 if문을 추가했다.

참고 : https://velog.io/@awesomelon/jquery-this.index%EB%A5%BC-javascript%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0