선택된 인자가 몇 번째인지 찾는 방법

[jQuery] 선택된 인자가 몇 번째인지 찾는 방법

by freezner · 2013년 8월 27일

같은 형식의 반복된 엘리먼트 요소 중에서 선택한 엘리먼트에 엑션을 주기 위해서는 이를 참조할 수 있는 인덱스값이 필요합니다.
보통 이런 상황에 자주 쓰이는 방법은 아래와 같습니다.

JavaScript

$("li").click(function(){ $("li:eq(1)").attr("data-val", "hello"); });

1 2 3

$("li").click(function(){    $("li:eq(1)").attr("data-val", "hello"); });

li요소를 클릭했을때 eq()를 이용해 eq index가 1에 해당하는 녀석의 data-val이라는 attribute에 “hello”라는 값을 넣어주는 코드입니다. 보통 이런식으로 eq를 많이 사용합니다. 그렇다면 eq안에 1과 같은 값을 어떻게 가져와야 할까요?

물론 저 코드 그대로 써도 동작은 하겠지만 eq 인자를 하드코딩해서 넣는다는 것 자체는 의미가 없죠. 아래 방법으로 eq index를 가져올 수 있습니다.

JavaScript

var index = $("li").index(this);

1	var index = $("li").index(this);

이 한 줄로 몇 번째임을 알 수 있는 index 값을 얻어 올 수 있습니다. index는 배열과 마찬가지로 0부터 시작됩니다. 그럼 정리를 해보겠습니다.

JavaScript

$("li").click(function(){ var index = $("li").index(this); $("li:eq(" + index + ")").attr("data-val", "hello"); });

1 2 3 4

$("li").click(function(){    var index = $("li").index(this);    $("li:eq(" + index + ")").attr("data-val", "hello"); });

li 요소를 클릭시 대상의 index 값을 얻어오고 그 얻어온 index를 이용해 eq로 대상을 참조해 원하는 값을 설정해줍니다. 이 방식은 자신을 참조하는 경우 $(this)만으로 동일하게 구현할 수 있습니다.

하지만 자신이 아닌 같은 레벨의 다른 엘리먼트의 속성을 설정해주고자 할 경우 유용합니다.