• 회원가입
  • 로그인

[Traversing] JQ - children() 메서드 ★ - 모든 자식요소 반환 (= children메서드 = 칠드런메서드)

목차

  1. children() 예제 - ul 요소의 자식요소에 스타일주기
  2. children() 정의
  3. children() 구문

 

children() 예제 - ul 요소의 자식요소에 스타일주기

 

<style>  

div {

    border:2px solid blue;

 }  

div * { 

    display: block;

    border: 2px solid lightgrey;

    color: lightgrey;

    padding: 5px;

    margin: 15px;

}

</style>

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("ul").children().css({"color": "red", "border": "2px solid red"});

});

</script>

 

<div>div 요소

    <ul> 

      <li>

        <span>홈짱닷컴</span>

      </li>

      <li>

        <span>Homzzang.com</span>

      </li>

    </ul>   

</div>


결과 보기

 

children() 정의

 

모든 직접 자식요소 반환. (단, 텍스트/주석 노드는 반환 X)

 



1. cf.

  • children() 메서드 : 선택요소의 직접 자식 요소 반환
  • find() 메서드 : 선택요소의 모든 자손 요소 반환
  • parent() 메서드 : 선택요소의 직접 부모 요소 반환
  • parents() 메서드 : 선택요소의 모든 조상 요소 반환

2. cf.
  • children() 메서드 : 텍스트 및 주석 노드는 반환 X.
  • contents() 메서드 : 텍스트 및 주석 노드도 반환 O

 

3. 예제 더 보기
https://api.jquery.com/children/

 

 

children() 구문

 

$(selector).children(filter)

 


[매개변수]

 

filter

필수. 자식 요소 검색 범위 좁히는 선택자 표현식.
(예) $("ul").children("li.first").css({"color": "red", "border": "2px solid red"});

 


[반환값]

 

모든 직접 자식 요소 반환.

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012