부모 객체태그를 jquery의 선택자로 선택하는 방법

◆ closest() vs parents()

두개의 메서드 모두 부모객체를 반환해 주는 메서드이다.
( 부모객체의 형제태그 까지는 찾지 않음 )

▶ closest() vs parents() 차이

• parents()

  인자에 해당 하는 모든 부모레벨의 객체를 배열로 담아온다.따라서, 해당 부모객체 전체가 제어된다. ( 단 출력은 [0]인덱스의 객체를 출력하게 된다. )

• closest()

  인자에 해당하는 제일 가까운 부모객체만 반환된다. 따라서 바로 위 부모객체만을 제어할 수 있다.

<span class="level1"></span>
<span class="level2"> 
	<span class="level3"> 
		<a id="a"></a>
	</span>
</span>

<script>
// 반환은 같음
console.log($("#a").parents("span")); => level3 반환
console.log($("#a").closest("span")); => level3 반환

// level3, level2 모두 배경색 변경
$("#a").parents("div").css("background","yellow");
// level3만 배경색 변경
$("#a").closest("div").css("background","yellow");
</script>