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

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