이전 글/JQuery
6. jQuery 선택자 - :even / :odd / :only-child / :only-of-type
usnooy_
2018. 1. 23. 22:59
:even / :odd
:only-child / :only-of-type
11. :even :odd
1 2 | $('tr:even').css("background-color", "#efefef"); $('tr:odd').css("background-color", "gray"); | cs |
:even -
0, 2, 4, 6, 8... 인덱스 값이 짝수인 것만 가져오는 선택자이다.
:odd -
1, 3, 5, 7, 9.. :even과 반대로 인덱스 값이 홀 수 인것만 가져오는 선택자이다.
12. :only-child / :only-of-type
1 2 | $('p:only-child').css("background-color","yellow"); $('p:only-of-type').css("background-color","yellow"); | cs |
:only-child -
자식태그를 : 앞에 입력되는 인자 하나만 가지는 것을 말한다.
코드 예시를 통해 설명하자면 자식태그를 p 태그 하나만 가지는 것을 가져오는 선택자이다.
:only-of-type -
only-child와 비슷하나, 자식태그를 여러개 보유하고 있어도 된다.
다만 : 앞에 입력되는 인자를 하나만 가지고 있어도 된다.
ex.
1 2 3 4 5 6 7 8 9 10 | <body> <div> <p></p> <span><span> </div> </body> <script> $('p:only-of-type').css("background-color","yellow"); </script> | cs |
이 경우 only-of-type 선택자를 이용하면 3번째 줄에
p태그의 background-color속성이 yellow로 변경된다.
반대로 p:only-child를 선언한다면 p태그만 가지고 있는 부모는 없기에, 아무 변화도 없다.