두 번째 태그로 CSS 설정[jQuery 예제]

$("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"});
});