Programing/Others
[jquery] parent > child 선택자
My Love Princess
2012. 11. 5. 12:43
- jQuery('parent > child')
- parent 유효한 선택요소
- child parent 에 속한 자식 요소
parent > child 는 스타일시트의 표현방식입니다. parent 에 속하는 child 요소에 어떤 스타일을 주고 싶을 때 사용됩니다. 그런데 이 CSS 방법은 IE6 버젼에서는 호환이 되지 않습니다. 그러나 이 선택 방법을 이용하여 jQuery 에서는 해당 요소에 접근할 수 있도록 선택자를 만들었습니다.
부모의 하위에 있는 모든 자식요소들을 선택하는 것이 아닙니다. 바로 직계자식 요소만 선택이 가능합니다. 아래 예제를 잘 보시기 바랍니다.
예 제
"<ul class="topnav"> 요소의 하위 리스트 아이템(LI)를 찾아 빨간색 2중선을 그립니다.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:14px; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<ul class="topnav">
<li>Item 1</li>
<li>Item 2
<ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
</li>
<li>Item 3</li>
</ul>
<script>$("ul.topnav > li").css("border", "3px double red");</script>
</body>
</html>미리보기
잘 보시면 ul 이 LI 에 한번 더 나옵니다. 그러나 그 UL의 하위에 있는 LI 에는 테두리가 없는 걸 볼 수 있습니다. 이 선택자는 바로 자신의 직계 자식요소에만 영향을 받게 하기 위해서 사용할 수 있습니다.