한동안 jQuery를 사용하고 있습니다. parent()선택기 를 사용하고 싶었습니다 . 나는 또한 closest()선택기를 생각해 냈습니다 . 그들 사이에 차이점을 찾을 수 없습니다. 있어요? 그렇다면 무엇입니까?
무엇 사이의 차이 parent(), parents()그리고 closest()?
답변:
closest()DOM 트리에서 선택기와 일치하는 첫 번째 요소를 선택합니다. 현재 요소에서 시작하여 위로 이동합니다.
parent()DOM 트리에서 하나의 요소를 위로 (단일 레벨 위로) 선택합니다.
parents()이 방법은parent()DOM 트리 와 유사 하지만 일치하는 모든 요소를 선택합니다. 부모 요소에서 시작하여 위로 이동합니다.
.parents()(대신 .parent()) 그렇지 않습니까?
에서 http://api.jquery.com/closest/
.parents () 및 .closest () 메소드는 비슷 그들은 그 DOM 트리까지 모두 트래버스. 미묘하지만 둘 사이의 차이점은 중요합니다.
.closest ()
- 현재 요소로 시작
- 제공된 선택기와 일치하는 것을 찾을 때까지 DOM 트리를 이동합니다.
- 반환 된 jQuery 객체는 0 개 또는 1 개의 요소를 포함합니다.
.부모님()
- 부모 요소로 시작
- DOM 트리를 문서의 루트 요소로 이동하여 각 조상 요소를 임시 컬렉션에 추가합니다. 그런 다음 선택기가 제공되면 선택기를 기반으로 해당 콜렉션을 필터링합니다.
- 반환 된 jQuery 객체는 0 개, 1 개 또는 여러 개의 요소를 포함합니다.
.부모의()
- DOM 요소 집합을 나타내는 jQuery 객체가 주어지면 .parent () 메서드를 사용하면 DOM 트리에서 이러한 요소의 부모를 검색하고 일치하는 요소에서 새 jQuery 객체를 구성 할 수 있습니다.
참고 : .parents () 및 .parent () 메서드는 비슷하지만 후자는 DOM 트리 위로 단일 수준 만 이동한다는 점이 다릅니다. 또한 $ ( "html"). parent () 메서드는 문서를 포함하는 집합을 반환하지만 $ ( "html"). parents ()는 빈 집합을 반환합니다.
관련 스레드는 다음과 같습니다.
Note.
The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree. Also, $("html").parent() method returns a set containing document whereas $("html").parents() returns an empty set.
미묘하지만 둘 사이의 차이점은 중요합니다.
- 현재 요소로 시작
- 제공된 선택기와 일치하는 것을 찾을 때까지 DOM 트리를 이동합니다.
- 반환 된 jQuery 객체는 0 개 또는 1 개의 요소를 포함합니다.
- 부모 요소로 시작
- DOM 트리를 문서의 루트 요소로 이동하여 각 조상 요소를 임시 컬렉션에 추가합니다. 그런 다음 선택기가 제공되면 선택기를 기반으로 해당 콜렉션을 필터링합니다.
- 반환 된 jQuery 객체는 0 개, 1 개 또는 여러 개의 요소를 포함합니다.
jQuery 문서에서
parent()메소드는 선택된 요소의 직접 부모 요소를 반환합니다. 이 메소드는 단일 레벨의 DOM 트리 만 순회합니다 .
parents()메소드를 사용 하면 DOM 트리에서 이러한 요소 의 조상 을 검색 할 수 있습니다 . 주어진 선택기에서 시작하여 위로 이동하십시오.
The **.parents()** and **.parent()** methods are almost similar, except that the latter only travels a single level up the DOM tree. Also, **$( "html" ).parent()** method returns a set containing document whereas **$( "html" ).parents()** returns an empty set.
[closest()][3]method returns the first ancestor of the selected element.An ancestor is a parent, grandparent, great-grandparent, and so on.
This method traverse upwards from the current element, all the way up to the document's root element (<html>), to find the first ancestor of DOM elements.
According to docs:
**closest()** method is similar to **parents()**, in that they both traverse up the DOM tree. The differences are as follows:
**closest()**
Begins with the current element
Travels up the DOM tree and returns the first (single) ancestor that matches the passed expression
The returned jQuery object contains zero or one element
**parents()**
Begins with the parent element
Travels up the DOM tree and returns all ancestors that matches the passed expression
The returned jQuery object contains zero or more than one element
$(this).closest('div')와 동일합니다 $(this).parents('div').eq(0).