[JQuery] .closest(), .parents() 메소드 속성 차이

■ JQuery .closest(), .parents() 메소드 속성 차이

---

.colsest()
선택한 요소의 상위 요소 중 조건에 맞는 가장 가까운 하나의 요소를 선택함

.find()
선택한 요소에서 조건에 맞는 요소를 모두 선택

---

■ .closest(), .parents() 차이

.closest()	.parents()
현재 요소로 시작	상위 요소로 시작
0 또는 1개의 요소	0개 이상의 요소

---

■ 예시

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" 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>

 

<ul> 항목 A에서 시작하는 요소 검색을 수행한다고 가정했을 때

1. closest()
<li> 클래스 item-a에서 가장 가까운 level-2 클래스를 가진 <ul>의 색상을 변경

$( "li.item-a" ).closest( "ul" ).css( "background-color", "red" );

 

2. parents()
<li> 클래스 item-a의 모든 부모 <ul>의 색상을 변경

$( "li.item-a" ).parents( "ul" ).css( "background-color", "red" );