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

참고: 인기 테마인 BE 테마(33%)The 7(35%) 할인 행사를 진행하고 있습니다.
참고

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

 



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.