티스토리 뷰

jQuery

[jQuery] 계층 선택자

계층 선택자

계층적인 구조에서 선택하는 방법입니다.


계층 선택자(Hierarchy)

계층 선택자
종류 예시 설명
자손 선택자 $("div li") 자식(하위) 태그 모두 선택합니다.
child 선택자 $("div > p") 자식(하위) 태그만 선택합니다.(자손은 포함안됨)
sibling 선택자 $("div + p") 자식 태그 다음 형제 태그를 선택합니다.
siblings 선택자 $("div ~ li") 자식 태그 다음 모든 형제태그를 선택합니다.
Sample : 계층 선택자
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리(jQuery)</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript">
		$(document).ready(function(){        
            //$(".list ul").css({ backgroundColor:"#9ab92e", border:"1px solid #01584d" });
			//$(".list > ul").css({ backgroundColor:"#9ab92e", border:"1px solid #01584d" });
			//$(".one1 + li").css({ backgroundColor:"#9ab92e", border:"1px solid #01584d" });
			$(".one1 ~ li").css({ backgroundColor:"#9ab92e", border:"1px solid #01584d" });
        }); 
        </script>
    </head>
    <body>
	    <h3>기본 태그를 선택하는 방법</h3>
		<div class="list">
			<ul class="list2">
				<li class="one1">one1</li>
				<li class="one2">one2</li>
				<li class="one3">one3</li>
				<li class="one4">one4</li>
				<li class="one5">one5</li>
				<li class="one6">one6</li>
				<li class="one7">one7</li>
				<li class="one8">one8</li>
				<li id="one10">one9
					<ul>
						<li>one9-1</li>
						<li>one9-2</li>
						<li>one9-3</li>
					</ul>
				</li>
			</ul>
		</div>
    </body>
</html>  

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

태그(Tag) 더보기

질문하기(Questions)
댓글쓰기 폼