[JS] JQuery 요소 가르키기

※ 해당 글은 다음 velog를 참고하여 작성되었습니다.

https://velog.io/@oask12/2-jQuery%EB%B6%80%EB%AA%A8-%EC%83%81%EC%9C%84-%ED%95%98%EC%9C%84-%ED%98%95%EC%A0%9C-%EC%9A%94%EC%86%8C

🔥 # 2 jQuery(부모, 상위, 하위, 형제 요소)

 

JS에서 부모 요소와 자식 요소는 HTML DOM에서 요소 간 계층적 관계를 나타낸다. DOM은 트리 구조로 표현하며 각 HTML 요소는 노드(node)로 표현한다. 

부모요소

부모요소에는 parent(), parents(), parentsUntil(), closest() 이 있다.

• parent() : 선택한 요소의 부모 요소를 선택한다.

    $(function(){
            $("span").parent().css("border", "1px solid red");
        })

span 태그의 바로 위 부모 태그인 li 태그 요소를 선택한다.

parent()는 연속으로도 쓸 수 있다. 예를 들어 부모의 부모를 선택하고 싶다면,

  $(function(){
            $("span").parent().parent().css("border", "1px solid red");
        })

• parents() : 선택한 요소의 상위 요소를 모두 선택한다

    $(function(){
            $("span").parents().css("border", "1px solid red");
        })

• parentsUntil() : 선택한 요소의 상위 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다.

      $(function(){
            $("span").parentsUntil("div").css("border", "1px solid red");
        })

• closest() : 선택한 요소를 포한한 상위 요소 중에서 지정한 선택자에 해당하는 요소 중 가장 첫 번째 요소를 선택한다.

  $(function(){
            $("span").closest("ul").css("border", "1px solid red");
        })

자식요소

자식요소에는 children(), find()가 있다.

• children() : 선택한 요소의 자식 요소를 모두 선택한다.

<ul class="ulStyle">
    <li>안녕</li>
    <li class="ip">안녕</li>
    <li>안녕</li>
</ul>

<script type="text/javascript">
$(function(){
    $("ul").children(".ip").css("border", "1px solid red");
})
</script>

• find() : 선택한 요소의 자손 요소 중에서 전달받은 상태에서 해당하는 요소를 모두 선택한다.

        $(function(){
            $("div").find("span").css("border", "1px solid red");
        })

형제요소

자식요소에는 siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()이 있다.

• siblings() : 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.

<div>div-first
    <ul class="second-ul">ul
        <li class="one">li</li>
        <li class="two">li</li>
        <li class="three">li</li>
        <li class="four">li</li>
    </ul>
</div>

<script type="text/javascript">
$(function(){
            $("li").siblings().css("border", "1px solid red");
})
</script>

• next() : 선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다.

    <div>div-first
        <ul class="second-ul">ul
            <li class="one">li</li>
            <li class="two">li</li>
            <li class="three">li</li>
            <li class="four">li</li>
        </ul>
    </div>
    
 <script type="text/javascript">
     $(function(){
        $(".two").next().css("border", "1px solid red");
    })
 </script>

• nextAll() : 선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다.

    <div>div-first
        <ul class="second-ul">ul
            <li class="one">li</li>
            <li class="two">li</li>
            <li class="three">li</li>
            <li class="four">li</li>
        </ul>
    </div>
    
 <script type="text/javascript>
     $(function(){
        $(".two").nextAll().css("border", "1px solid red");
    })
 </script>

• nextUntil() : 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다.

 <div>div-first
        <ul class="second-ul">ul
            <li class="one">li</li>
            <li class="two">li</li>
            <li class="three">li</li>
            <li class="four">li</li>
        </ul>
    </div>
    
 <script type="text/javascript>
     $(function(){
        $(".one").nextUntil(".three").css("border", "1px solid red");
    })
 </script>

• prev() : 선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다.

<div>div-first
    <ul class="second-ul">ul
        <li class="one">li</li>
        <li class="two">li</li>
        <li class="three">li</li>
        <li class="four">li</li>
    </ul>
</div>

<script type = "text/javascript>
    $(function(){
        $(".four").prev().css("border", "1px solid red");
    })
</script>

• prevAll() : 선택한 요소의 이전에 위치한 형제 요소를 모두 선택한다.

<div>div-first
    <ul class="second-ul">ul
        <li class="one">li</li>
        <li class="two">li</li>
        <li class="three">li</li>
        <li class="four">li</li>
    </ul>
</div>

<script type="text/javascript>
    $(function(){
        $(".four").prevAll().css("border", "1px solid red");
    })
</script>

• prevUntil() : 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택한다.

    <div>div-first
        <ul class="second-ul">ul
            <li class="one">li</li>
            <li class="two">li</li>
            <li class="three">li</li>
            <li class="four">li</li>
        </ul>
    </div>

<script type="text/javascript>
    $(function(){
        $(".four").prevUntil(".one").css("border", "1px solid red");
    })
</script>