순회(탐색) 메소드 2 (descendants 메소드)

• descendants(자손, 후손) 메소드
  - 선택된 요소의 하위 요소들을 선택할 수 있는 메소드
  
  - $("요소명").children( [ 매개변수 ] )
    - 선택된 요소의 모든 자식 객체 리턴
    - 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴
  
  - $("요소명").find(매개변수)
    - 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴

<div class="wrap">
   <div class="type">div (great-grand parent)
      <ul>ul (grand parent)
         <li>li (direct parent)
            <span>span</span>
         </li>
      </ul>
   </div>

   <div class="type">div (grand parent)
       <p>p (direct parent)
          <span>span</span>
      </p>
   </div>
</div>

<p id="test">테스트</p>

$(document).ready(function(){
  
  // id가 test인 요소의 테두리를 2px 빨간 실선, 글자를 파란색으로 변경
  $("#test").css("border", "2px solid red").css("color", "blue");
  
  // 자바스크립트 객체를 매개변수로 전달
  // 자바스크립트 객체의 key는 무조건 string이기 때문에 "", '' 또는 생략 가능
  $("#test").css({"border" : "2px solid red", "color" : "blue"})
})

// css()의 매개변수로 사용할 코드를 미리 변수에 저장하기
const style1 = {"border" : "2px solid red", color : "red"};
const style2 = {"border" : "2px solid blue", color : "blue"}
const style3 = {"border" : "2px solid green", color : "green"};
const style4 = {"border" : "2px solid yellow", color : "yellow"};
const style5 = {"border" : "2px solid violet", color : "violet"};

$(function(){
 
  // 클래스가 wrap인 요소의 자식 스타일을 style1로 설정
  $(".wrap").children().css(style1);
 
  // 클래스가 wrap인 요소의 후손 ul, p 태그의 스타일을 style2로 설정
  $(".wrap").children().children().css(style2);
 
  // 클래스가 type인 요소의 자식 중 ul태그의 스타일을 style3로 설정
  $(".type").children("ul").css(style3);

  // 클래스가 wrap인 요소를 기준으로 li 태그의 스타일을 style4로 설정
  $(".wrap).children("ul").children("li").css(style4);
 
  // 클래스가 wrap인 요소의 후손 중 모든 span 태그의 스타일을 style5로 설정
  $(".wrap").find("span").css(style5);
})

See the Pen 24-12-24 jquery 2-1 by Namu (@Namu-the-sans) on CodePen.