본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[jQuery] 계층 선택자

계층 선택자

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


계층 선택자(Hierarchy)

계층 선택자
종류 예시 설명
하위 선택자(Descendant Selector) $("div p") div 태그의 모든 자식 중 p 태그를 모두 선택합니다.
자식 선택자(Child Selector) $("div > p") div 태그의 모든 자식 중 첫번째 자식 p 태그를 선택합니다.
형제 선택자(Next Adjacent Selector) $("div + p") div 태그의 인접한 형제 p 태그 중 첫번째 태그만 선택합니다.
형제들 선택자(Next Siblings Selector) $("div ~ p") div 태그의 인접한 형제 p 태그를 모두 선택합니다.

Sample1

기본 선택자 예제입니다.

결과

계층 선택자

  • 기본 선택자
  • 계층 선택자
    • 후손 선택자
    • 자손 선택자
    • 형제 선택자
    • 형제들 선택자
  • 속성 선택자
  • 기본 필터 선택자
  • 내용 필터 선택자
  • 보임 필터 선택자
  • 자식요소 필터 선택자
  • 폼 필터 선택자
jquery
$(".list li").addClass("rLine");
$(".list > li").addClass("rLine");
$(".select + li").addClass("rLine");
$(".select ~ li").addClass("rLine");
html
<h3>계층 선택자</h3>
<div>
    <ul class="list">
        <li>기본 선택자</li>
        <li>계층 선택자
            <ul>
                <li>후손 선택자</li>
                <li>자손 선택자</li>
                <li>형제 선택자</li>
                <li>형제들 선택자</li>
            </ul>
        </li>
        <li>속성 선택자</li>
        <li>기본 필터 선택자</li>
        <li class="select">내용 필터 선택자</li>
        <li>보임 필터 선택자</li>
        <li>자식요소 필터 선택자</li>
        <li>폼 필터 선택자</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        .choice a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>계층 선택자</h3>
    <div>
        <ul class="list">
            <li>기본 선택자</li>
            <li>계층 선택자
                <ul>
                    <li>후손 선택자</li>
                    <li>자손 선택자</li>
                    <li>형제 선택자</li>
                    <li>형제들 선택자</li>
                </ul>
            </li>
            <li>속성 선택자</li>
            <li>기본 필터 선택자</li>
            <li class="select">내용 필터 선택자</li>
            <li>보임 필터 선택자</li>
            <li>자식요소 필터 선택자</li>
            <li>폼 필터 선택자</li>
        </ul>
    </div>
    
    <div class="choice">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>.list li</em>를 선택합니다.</a>
        <a href="#" class="btn2">클릭하면 <em>.list > li</em>를 선택합니다.</a>
        <a href="#" class="btn3">클릭하면 <em>.list + li</em>를 선택합니다.</a>
        <a href="#" class="btn4">클릭하면 <em>.list ~ li</em>를 선택합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice .off1").on("click", function(e){
            e.preventDefault();
            $(".list li").removeClass("rLine");
        });
        $(".choice .btn1").on("click", function(e){
            e.preventDefault();
            $(".list li").addClass("rLine");
        });
        $(".choice .btn2").on("click", function(e){
            e.preventDefault();
            $(".list > li").addClass("rLine");
        });
        $(".choice .btn3").on("click", function(e){
            e.preventDefault();
            $(".select + li").addClass("rLine");
        });
        $(".choice .btn4").on("click", function(e){
            e.preventDefault();
            $(".select ~ li").addClass("rLine");
        });
    </script>
</body>
</html>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기