• 회원가입
  • 로그인

[Traversing] JQ - closest() 메서드 ★ - 선택요소 첫번째 조상 반환 (= 최근접 지정 조상요소 선택 = closest메서드 = 클로우세스트 메서드)

목차

  1. closest() 예제 - 최근접 조상 ul 요소
  2. closest() 정의
  3. closest() / parents()  차이점

 

closest() 예제 - 최근접 조상 ul 요소

[예제]  body  >  div  >  ul  >  ul  >  li  >  span  구조 경우

 

$(document).ready(function(){

    $("span").closest("ul").css({"color": "red", "border": "2px solid red"});

});

</script>

 

결과 보기

 

closest() 정의

 

현재 요소의 지정 요소 첫 번째 조상 찾기. 

 



1.
closest("요소") 경우, 현재 요소 포함해 가장 첫번째 조상 요소 반환.
만약, 일치하는 요소가 자기 자신뿐이면, 자기 자신을 결과값으로 반환.

2.
현재 요소에서 시작해 문서 루트 요소인 <html> 요소까지 거슬러 올라가 찾음.

3.
DOM 트리 따라 이동한다는 점에서 parents() 메서드와 유사하나 약간 차이 있음.

 


cf.

 

parent() 메서드

선택 요소의 직접 부모 요소 반환


parentsUntil() 메서드

주어진 요소 사이의 모든 부모 조상 요소 반환

 

 

closest() / parents()  차이점

closest () 메서드

 

  1. 현재 요소에서 시작
  2. DOM 트리 이동해 일치하는 첫번째 조상만 반환.
  3. 반환된 jQuery 객체는 0 개 또는 하나.

 


parents() 메서드

 

  1. 부모 요소에서 시작.
  2. DOM 트리 따라 이동해 일치하는 모든 조상 반환.
  3. 반환 된 jQuery 객체는 0 개 또는 하나 이상.



방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012