[jQuery] 자식노드 찾기 children()

 

자식 노드란?

자식 노드는 특정 노드 바로 아래 위치한 노드를 말한다.

 

모든 자식 노드 찾기

$대상.children()

 

<script>
$(document).ready(function(){
$( "ul.level-2" ).children().css( "background-color", "red" );
});
</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>

 

실행결과

 

 

 

특정 자식 노드만 찾기

$대상.children("선택자")

 

<script>
$(document).ready(function(){
$( "ul.level-2" ).children(".item-a").css( "background-color", "red" );
});
</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>

실행결과

 

 

 

 

 

 

참고 : https://api.jquery.com/children/#children-selector