[jQuery] .children() - 선택한 요소의 자식 요소를 선택하는 메서드

안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.

jQuery의 .children() 사용법

jQuery의 .children() 메서드는 선택한 요소의 직계 자식 요소를 선택하는 데 사용됩니다.

이 메서드는 선택한 요소의 모든 자식 요소를 선택하지 않으며, 

선택한 요소의 첫 번째 수준 하위 요소만 반환합니다.

 

.children() 메서드는 다음과 같은 방법으로 사용됩니다.

$("selector").children("filter");

'selector'는 자식 요소를 찾을 때 사용할 부모요소 선택하는 데 사용되며
'filter'는 선택적으로 사용할 수 있는 필터로 자식 요소 중 선택할 요소를 지정할 수 있습니다.

 

// javascript code
var $children = $(".parent").children();

// html code
<div class="parent">
  <div class="child">첫 번째 자식 요소</div>
  <div class="child">두 번째 자식 요소</div>
  <div class="grandchild">세 번째 자식 요소
    <div class="great-grandchild">증손자 요소</div>
  </div>
</div>

위의 코드는 '.parent' 요소의 모든 직계 자식 요소를 선택합니다. 

'$children' 변수에는 다음과 같은 결과가 담기게 됩니다.

[
  <div class="child">첫 번째 자식 요소</div>,
  <div class="child">두 번째 자식 요소</div>,
  <div class="grandchild">세 번째 자식 요소
     <div class="great-grandchild">증손자 요소</div>
  </div>
]

 

'.parent' 클래스를 가진 'div' 요소의 '.child' 클래스를 가진

자식 요소만 반환하고 싶으면 아래와 같이 호출해 주시면 됩니다. 

// javascript code
var $children = $(".parent").children(".child");

[
   <div class="child">첫 번째 자식 요소</div>,
   <div class="child">두 번째 자식 요소</div>
]