Diferencia entre jQuery parent (), parents () y las funciones más cercanas ()

184

He estado usando jQuery por un tiempo. Quería usar el parent()selector. También se me ocurrió el closest()selector. No se pudo encontrar ninguna diferencia entre ellos. ¿Hay alguna? En caso afirmativo, ¿qué?

¿Qué es la diferencia entre parent(), parents()y closest()?

jquery Sajjan Gurung
fuente
66
parent :::: viaja 1 paso atrás a parent .... :::: parents ::: da una lista de todos los padres .... :::: más cercano ::: viaja de regreso a través de hermanos hasta que encuentra la condición y devuelve solo el primero. Todo esto se puede modificar con selectores adicionales
Muhammad Umer

Respuestas:

177

closest()selecciona el primer elemento que coincide con el selector, desde el árbol DOM. Comienza desde el elemento actual y viaja hacia arriba.

parent() selecciona un elemento hacia arriba (un solo nivel hacia arriba) del árbol DOM.

parents()El método es similar parent()pero selecciona todos los elementos coincidentes en el árbol DOM. Comienza desde el elemento padre y viaja hacia arriba.

Subash
fuente
10
¿No es .parents()(en lugar de .parent()) que recupera todos los elementos?
acdcjunior
65
A esta respuesta le falta un punto importante: "Lo más cercano" comienza con el elemento actual y sube, mientras que "Padres" comienza con el elemento padre y sube.
Andrew
196

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

Los métodos .parents () y .closest () son similares en que ambos atraviesan el árbol DOM. Las diferencias entre los dos, aunque sutiles, son significativas:

.closest ()

  • Comienza con el elemento actual
  • Recorre el árbol DOM hasta que encuentra una coincidencia para el selector suministrado
  • El objeto jQuery devuelto contiene cero o un elemento

.parents ()

  • Comienza con el elemento padre
  • Sube por el árbol DOM al elemento raíz del documento, agregando cada elemento ancestro a una colección temporal; luego filtra esa colección en función de un selector si se proporciona uno
  • El objeto jQuery devuelto contiene cero, uno o varios elementos.

.padre()

  • Dado un objeto jQuery que representa un conjunto de elementos DOM, el método .parent () nos permite buscar a través de los padres de estos elementos en el árbol DOM y construir un nuevo objeto jQuery a partir de los elementos coincidentes.

Nota: Los métodos .parents () y .parent () son similares, excepto que este último solo sube un nivel por el árbol DOM. Además, el método $ ("html"). Parent () devuelve un conjunto que contiene un documento, mientras que $ ("html"). Parents () devuelve un conjunto vacío.

Aquí hay hilos relacionados:

Naveed
fuente
8
Realmente preguntó sobre parent (), no parents ().
ScubaSteve
2
@ScubaSteve: comprueba la respuesta nuevamente con 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, sí, pero la pregunta de los padres () es más interesante.
Paul Draper
15

Las diferencias entre los dos, aunque sutiles, son significativas:

.closest ()

  • Comienza con el elemento actual
  • Recorre el árbol DOM hasta que encuentra una coincidencia para el selector suministrado
  • El objeto jQuery devuelto contiene cero o un elemento

.parents ()

  • Comienza con el elemento padre
  • Sube el árbol DOM al elemento raíz del documento, agregando cada elemento ancestro a una colección temporal; luego filtra esa colección en función de un selector si se proporciona uno
  • El objeto jQuery devuelto contiene cero, uno o varios elementos.

De documentos jQuery

antyrat
fuente
13
Creo que estás describiendo .parents () aquí
Muhammad Umer
1

Hay diferencia entre ambos $(this).closest('div')y$(this).parents('div').eq(0)

Básicamente, closestcomienza a hacer coincidir elementos del elemento actual, mientras que parentscomienza a hacer coincidir elementos desde el elemento primario (un nivel por encima del elemento actual)

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

parent()El método devuelve el elemento primario directo del seleccionado. Este método solo atraviesa un solo nivel en el árbol DOM.

parents()El método nos permite buscar a través de los antepasados de estos elementos en el árbol DOM. Comience desde el selector dado y 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
fuente
-1

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

hsuk
fuente
9
No del todo, si $ (esto) también es un div.
Frank Fajardo