반응형
jQuery selector에서 부모 아래 자식을 찾을 때는 구분자 ">"를 사용합니다.
예제)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>child demo</title>
<style>
body {
font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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.topnav > li" ).css( "border", "3px double red" );
ul 태그 중에 topnav라는 클래스명을 요소를 찾은 다음 ">"로 자식들 중에 li 태그를 찾아서 스타일을 부여하였습니다.
여기서 명심해야 할 것은 자손들이 아닌 자식들만 해당된다라는 점입니다.
<ul> 아래에 <li>Nested item 1</li>와 같은 자손들이 존재하지만 적용 받지 않았습니다.
여기서 잠깐! 그럼 아래 결과처럼 자손들까지 한꺼번에 지정하고 싶으면 어떻게 하면 될까요?
|
오히려 간단하게 ">"를 없애고 공백이 들어간 상태로 하면 됩니다.
$( "ul.topnav li" ).css( "border", "3px double red" );이렇게 말이죠.
반응형
'Programming' 카테고리의 다른 글
| RecyclerView onClick (0) | 2020.02.10 |
|---|---|
| 자바에서 문자열을 반복하는 간단한 방법 (0) | 2020.02.10 |
| jQuery Selector :checked (0) | 2018.03.11 |
| jQuery Selector :animated (0) | 2018.03.11 |
| jQuery Selector 지정 문자열로 시작하는 요소 찾아봅시다 (0) | 2018.03.09 |