[jquery] jQuery parent (), parents () 및 closest () 함수의 차이점

Program / 글쓴이

한동안 jQuery를 사용하고 있습니다. parent()선택기 를 사용하고 싶었습니다 . 나는 또한 closest()선택기를 생각해 냈습니다 . 그들 사이에 차이점을 찾을 수 없습니다. 있어요? 그렇다면 무엇입니까?

무엇 사이의 차이 parent(), parents()그리고 closest()?

답변

closest()DOM 트리에서 선택기와 일치하는 첫 번째 요소를 선택합니다. 현재 요소에서 시작하여 위로 이동합니다.

parent() DOM 트리에서 하나의 요소를 위로 (단일 레벨 위로) 선택합니다.

parents()이 방법은 parent()DOM 트리 와 유사 하지만 일치하는 모든 요소를 ​​선택합니다. 부모 요소에서 시작하여 위로 이동합니다.

답변

에서 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 ()는 빈 집합을 반환합니다.

관련 스레드는 다음과 같습니다.

답변

미묘하지만 둘 사이의 차이점은 중요합니다.

.closest ()

  • 현재 요소로 시작
  • 제공된 선택기와 일치하는 것을 찾을 때까지 DOM 트리를 이동합니다.
  • 반환 된 jQuery 객체는 0 개 또는 1 개의 요소를 포함합니다.

.부모님()

  • 부모 요소로 시작
  • DOM 트리를 문서의 루트 요소로 이동하여 각 조상 요소를 임시 컬렉션에 추가합니다. 그런 다음 선택기가 제공되면 선택기를 기반으로 해당 콜렉션을 필터링합니다.
  • 반환 된 jQuery 객체는 0 개, 1 개 또는 여러 개의 요소를 포함합니다.

jQuery 문서에서

답변

$(this).closest('div')와 둘 사이에 차이가 있습니다$(this).parents('div').eq(0)

기본적으로 closest현재 parents요소에서 요소 일치를 시작하는 반면 부모 (현재 요소보다 한 수준 위)에서 요소 일치를 시작하십시오.

See http://jsfiddle.net/imrankabir/c1jhocre/1/

답변

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

답변