[jQuery] 체이닝(Chaining)과 탐색(Traversing)

체이닝(Chaining) 

:  선택한 엘리먼트에서, 여러 메소드들을 체인처럼 묶어 차례로 실행되게 함. 

: 같은 셀렉터를 한번 이상 쓰지 않아도 되고, 코드가 짧아진다는 장점이 있다. 

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

// 체이닝 된 메소드들이 수십개로 늘어나서 가독성이 힘들어진다면 줄바꿈을 해도 된다.
$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

 

---

탐색(Traversing)

: 위의 체이닝은 하나의 엘리먼트에서 연속된 효과를 주었으나, 탐색은 도중에 대상을 바꿀 수 있게 한다.

: 한 엘리먼트에서 원하는 엘리먼트를 찾아나가는 것이다.

: 바로 원하는 대상을 적어버린다면, 나도 몰랐던 같은 이름의 엘리먼트가 겹쳐 적용될 수 있으니, 꼬임을 방지하기 위해 깊이 들어가 특정하는 것이다.

 

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

$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );

 

 

.find()

Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

 

 

---

참고 및 출처 : 

https://jae04099.tistory.com/entry/%EC%B2%B4%EC%9D%B4%EB%8B%9DChaining%EA%B3%BC-%ED%83%90%EC%83%89Traversing

[jQuery] 체이닝(Chaining)과 탐색(Traversing)

 

https://api.jquery.com/find/#find-selector

.find() | jQuery API Documentation