[jQuery]children() find() 차이 바로아래 자식, 모든 자손 노드

 

children() find() 차이

children()메서드는 바로아래 자식 노드에서만 찾는다.

find()메서드는 바로 아래 자식 노드 뿐만 아니고 모든 자손 노드에서 찾는다.

 

 

children()

바로아래 자식 노드 선택

<script>
    $(document).ready(function() {
        $(".level-1").children("li").css("border", "4px solid #00f");
    });
</script>


<ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
                <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </li>
    <li class="item-iii">III</li>
</ul>

실행결과

 

 

find()

모든 자손 노드 선택

<script>
    $(document).ready(function() {
        $(".level-1").find("li").css("border", "4px solid #f00");
    });
</script>


<ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
                <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </li>
    <li class="item-iii">III</li>
</ul>

 

 

 

 

실행결과