JQuery day8

조상요소 탐색

조상요소 탐색

특정 요소에서 조상 요소에 해당하는 요소를 탐색하는 방법에 대해 알아보자

종류	설명
parent()	선택한 요소의 부모요소를 선택 선택자를 인수로 전달하여 전달받은 선택자에 해당하는 부모 요소만을 선택할 수 있음
parents()	선택한 요소의 조상요소를 선택 선택자를 인수로 전달하여 전달받은 선택자에 해당하는 조상요소만을 선택할 수 있음
parentsUntil()	선택한 요소의 조상 요소 중에서 전달받은 선택자에서 해당하는 요소 바로 이전까지의 요소만을 모두 선택 선택자를 인수로 전달하지 않으면 parents() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택

<div class="container">
    <div>div 요소
        <ul>ul 요소
            <li id="second">li 요소
                <p>p요소
                    <span>span 요소</span>
                </p>
            </li>
        </ul>
    </div>
</div>
<button id="parentBtn">p 요소의 부모 요소</button>

html 확인 )

<script>
    $(function(){
    $('#parentBtn').on('click', function(){
        $('p').parent().css('border', '3px solid red'); // 바로 윗 부모
    });
});
</script>

parent() 적용 )

<script>
    $(function(){
    $('#parentBtn').on('click', function(){
        $('p').parents().css('border', '3px solid red'); // 모든 직계 부모
    });
});
</script>

parents() 적용 )

<script>
    $(function(){
    $('#parentBtn').on('click', function(){
        $('p').parents('div').css('border', '3px solid red'); // 모든 직계 부모 중에서 div만 찾기
    });
});
</script>

parents(‘요소’) 적용 )

<script>
    $(function(){
    $('#parentBtn').on('click', function(){
        $('p').parentsUntil('div').css('border', '3px solid red'); // 모든 직계 부모 중에서 div를 만나기 전까지 찾기
    });
});
</script>

parentsUntil(‘요소’) 적용 )