순회(탐색) 메소드 - 1 (Ancestors 메소드)

• Ancestors(조상) 메소드
  - 선택된 요소의 상위 요소들을 선택할 수 있는 메소드
  
  - $("요소명").parent( )
  : 선택된 요소의 바로 위 상위 요소
  
  - $("요소명").parents( [ 매개변수 ] )
  : 선택된 요소의 모든 상위 요소 리턴
  : 매개변수가 있으면 매개변수와 일치하는 부모만 리턴
  
  - $("요소명").parentsUntil(매개변수)
  : 선택된 요소부터 매개변수 요소 전까지 범위의 요소 리턴

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

.wrap *{
   border: 1px solid lightgray;
   display: block;
   padding: 5px;
   margin: 15px;
   color: gray;
}

.type {
   width: 500px;
}

$(function(){
   // parent() : 선택된 요소의 바로 상위 요소(부모) 선택
   
   // span 태그 부모 요소의 테두리, 글자색 변경
   $("span").parent().css("border", "2px solid red").css("color", "red");
   
   // li 태그의 "모든" 상위 요소의 글자색을 파란색으로 변경
   $("li").parents().css("color", "blue");
   
   // li 태그의 상위 요소 중 div만 선택하여 테두리 변경
   $("li).parents("div").css("border", "2px dashed green");
   
   // span 태그부터 상위 요소 중
   // div 태그를 만나기 이전까지 요소를 선택하여 배경색 변경
   $("span").parentsUntil("div").css("backgroundColor", "skyBlue");
})

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