[jQuery] .closet() 과 ,parents()

★ What is .closest(selector) ?

  selector 에서 매칭되는 첫번째 element를 자기 자신을 포함하며 DOM 트리에서 상위 element 로 거슬러 올라가면서 찾아내는 메소드이다. 

즉, 현재 위치에서 가장 가까운 element 하나만 찾아내는 것으로 selector 에 매칭되는 모든 element를 찾아내는 .parent() 와 가장 큰 차이점이다. 

★ .closest() vs .parents()

.closest()	.parents()
현재 element 에서 탐색 출발	현재 element 의 부모 element 에서 탐색 출발
DOM 트리에서 selector 에 매칭되는 하나의 element 를 찾을 때까지 위로 탐색	DOM 트리에서 루트 element 까지 각각의 상위 element 를 임시 저장소에 추가하면서 위로 탐색 : selector 에 근거한 저장소를 추려낸다.
반환된 jQuery 객체는 0개 또는 1개의 element 를 포함한다.	반환 된 jQuery 객체는 0개 이상의 element 를 포함한다.

★ Example

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

출처 : http://api.jquery.com/closest/