<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<h4>요소 탐색하기</h4>
        <div class="ancestor">
            <div class="parent">
                <div class="child1"></div>
                <div class="child2"></div>
                <div class="child3"></div>
            </div>
        </div>
        <button type="button" onclick="findParent()">부모 찾기</button>
        <button type="button" onclick="findParents()">조상찾기</button>
        <button type="button" onclick="findNext()">다음 형제 찾기</button>
        <button type="button" onclick="findPrev()">이전형제 찾기</button>
        <button type="button" onclick="findChildren()">모든 자식찾기</button>
//요소 찾기

function findParent() {
    console.log($('.child2').parent()); //parent
}
function findParents() {
    console.log($('.child2').parents()); //ancestor, parent, child1
}
function findNext() {
    console.log($('.child2').next()); // child3
}
function findPrev() {
    console.log($('.child2').prev()); //child1
}
function findChildren() {
    console.log($('.child2').children()); // child1, child2
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.