jQuery 순회 - children() 메서드

jQuery 遍历参考手册

인스턴스

모든 "selected" 클래스 이름을 가진 div의 자식 요소를 찾아서 파란색으로 설정하십시오：

$("div").children(".selected").css("color", "blue");

직접 테스트해 보세요

정의와 사용법

children() 메서드는 선택된 요소의 모든 직접 자식 요소를 반환합니다.

문법

.children(selector)
매개변수 설명
selector 문자열 값, 일치하는 요소의 선택자 표현식을 포함합니다.

상세 설명

DOM 요소 집합을 나타내는 jQuery 객체가 주어졌을 때, .children() 메서드는 이 요소를 DOM 트리에서 검색하고, 일치하는 요소로 새로운 jQuery 객체를 생성할 수 있습니다..find() .children() 메서드와 유사하지만, 이는 DOM 트리에서 단일层级로만 내려다보습니다.

주의하세요, 대부분의 jQuery 메서드와 마찬가지로, .children()는 텍스트 노드를 반환하지 않습니다. 텍스트 노드와注释 노드를 포함한 모든 자식 노드를 얻으려면 .contents()를 사용하세요.

이 메서드는 선택자 표현식을 선택 사항으로 받아들이며, $()에 전달된 매개변수의 타입과 동일합니다. 선택자를 적용하면 요소가 해당 표현식과 일치하는지 검사하고, 이를 통해 요소를 필터링합니다.

이 기본적인 중첩 목록을 가진 페이지를 생각해 보세요:

<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>

직접 테스트해 보세요

level-2 목록에서 시작하면, 그의 자식 요소를 찾을 수 있습니다:

$('ul.level-2').children().css('background-color', 'red');

이 코드의 결과는, 프로젝트 A, B, C에 빨간 배경이 적용됩니다. 선택자 표현식을 적용하지 않았기 때문에, 반환된 jQuery 객체는 모든 자식 요소를 포함합니다. 선택자를 적용하면 해당 프로젝트만 포함됩니다.

jQuery 遍历参考手册