Diferença entre jQuery parent (), parent () e funções mais próximas ()

184

Estou usando o jQuery há um tempo. Eu queria usar o parent()seletor. Eu também vim com o closest()seletor. Não foi possível encontrar nenhuma diferença entre eles. Existe algum? Se sim, o que?

Qual é a diferença entre parent(), parents()e closest()?

jquery Sajjan Gurung
fonte
6
parent :::: viaja 1 passo atrás para parent .... :::: parents ::: fornece uma lista de todos os pais .... :::: mais próximo ::: viaja de volta pelos irmãos até encontrar a condição e retorne apenas o primeiro. Todos estes podem ser modificados com seletores adicionais
Muhammad Umer

Respostas:

177

closest()seleciona o primeiro elemento que corresponde ao seletor, na árvore DOM. Começa a partir do elemento atual e sobe.

parent() seleciona um elemento acima (nível único acima) da árvore DOM.

parents()O método é semelhante a, parent()mas seleciona todos os elementos correspondentes na árvore DOM. Começa a partir do elemento pai e sobe.

Subash
fonte
10
Não é .parents()(em vez de .parent()) que recupera todos os elementos?
Acdcjunior
65
Está faltando um ponto importante na resposta: "Mais próximo" começa com o elemento atual e sobe, enquanto "Pais" começa com o elemento pai e sobe.
Andrew
196

de http://api.jquery.com/closest/

Os métodos .parents () e .closest () são semelhantes, pois ambos atravessam a árvore do DOM. As diferenças entre os dois, embora sutis, são significativas:

.closest ()

  • Começa com o elemento atual
  • Percorre a árvore do DOM até encontrar uma correspondência para o seletor fornecido
  • O objeto jQuery retornado contém zero ou um elemento

.pais()

  • Começa com o elemento pai
  • Percorre a árvore DOM até o elemento raiz do documento, adicionando cada elemento ancestral a uma coleção temporária; em seguida, filtra essa coleção com base em um seletor, se um for fornecido
  • O objeto jQuery retornado contém zero, um ou vários elementos

.parent ()

  • Dado um objeto jQuery que representa um conjunto de elementos DOM, o método .parent () nos permite pesquisar os pais desses elementos na árvore DOM e construir um novo objeto jQuery a partir dos elementos correspondentes.

Nota: Os métodos .parents () e .parent () são semelhantes, exceto que o último viaja apenas um único nível na árvore do DOM. Além disso, o método $ ("html"). Parent () retorna um conjunto que contém o documento, enquanto $ ("html"). Parents () retorna um conjunto vazio.

Aqui estão tópicos relacionados:

Naveed
fonte
8
Ele realmente perguntou sobre o pai (), não os pais ().
ScubaSteve
2
@ ScubaSteve: Por favor, verifique a resposta novamente com Note.
Naveed
1
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.
Naveed
1
@ ScubaSteve, sim, mas a pergunta dos pais () é mais interessante.
Paul Draper
15

As diferenças entre os dois, embora sutis, são significativas:

.closest ()

  • Começa com o elemento atual
  • Percorre a árvore do DOM até encontrar uma correspondência para o seletor fornecido
  • O objeto jQuery retornado contém zero ou um elemento

.pais()

  • Começa com o elemento pai
  • Percorre a árvore DOM até o elemento raiz do documento, adicionando cada elemento ancestral a uma coleção temporária; em seguida, filtra essa coleção com base em um seletor, se um for fornecido
  • O objeto jQuery retornado contém zero, um ou vários elementos

De documentos jQuery

antyrat
fonte
13
Eu acho que sua .parents descrevendo () aqui
Muhammad Umer
1

Há diferença entre ambos $(this).closest('div')e$(this).parents('div').eq(0)

Basicamente, closestinicie o elemento correspondente a partir do elemento atual, enquanto o elemento parentsinicial é iniciado (um nível acima do elemento atual)

See http://jsfiddle.net/imrankabir/c1jhocre/1/
Imran Kabir
fonte
0

parent()O método retorna o elemento pai direto do selecionado. Este método percorre apenas um único nível na árvore DOM.

parents()O método nos permite pesquisar os ancestrais desses elementos na árvore DOM. Comece a partir do seletor fornecido e suba.

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
Vaibhav Sharma
fonte
-1

$(this).closest('div')é igual $(this).parents('div').eq(0).

hsuk
fonte
9
Não é bem assim, se $ (this) também é uma div.
Frank Fajardo