$("div").eq(n).css()를 사용하여 "n-1"번째 요소의 CSS 스타일을 설정합니다.
.eq() 선택자(selector)는 특정 인덱스 번호로 된 요소(element)를 선택하는 데 사용됩니다. 인덱스 번호는 0부터 시작됩니다. 그러므로 첫 번째 요소의 인덱스 번호는 "0"이 됩니다. 두 번째 요소를 선택하려면 ".eq(1)"을 사용합니다. $("div").eq(n)은 $("div:eq(n)")으로도 사용이 가능합니다.
jQuery 스크립트 예제:
$("input").click(function(){ $("div").eq(1).css ({"background-color":"blue","font-style":"italic"}); });
HTML 예제:
<div>첫 번째 문장입니다.</div> <div>두 번째 문장입니다.</div> <div>세 번째 문장입니다.</div> <input type="button" value="클릭">
위의 예제를 실행하면, 버튼을 누르면 두 번째 문장의 스타일이 변하게 됩니다. (데모)
:eq() 선택자 대신에 :nth-of-type() 선택자를 사용해도 동일한 결과를 얻습니다. 위의 샘플 jQuery 스크립트는 다음과 같이 사용할 수도 있습니다.
$("input").click(function(){ $("div:nth-of-type(2)").css ({"background-color":"blue","font-style":"italic","color":"white"}); });
댓글 남기기