Diferencia entre las funciones jQuery parent (), parents () y closer ()

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

¿Cuál es la diferencia entre parent() , parents() y closest() ?

closest() selecciona el primer elemento que coincide con el selector, desde el árbol DOM.

parent() selecciona un elemento en el árbol DOM.

parents() método parents() es similar a parent() pero selecciona todos los elementos coincidentes en el árbol DOM.

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

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

.closest ()

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

.parents ()

  • Comienza con el elemento padre
  • Viaja por el árbol DOM hasta el 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 múltiples 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 recorre un único nivel hasta el árbol DOM. Además, el método $ (“html”). Parent () devuelve un conjunto que contiene el documento, mientras que $ (“html”). Parents () devuelve un conjunto vacío.

Aquí hay hilos relacionados:

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

.closest ()

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

.parents ()

  • Comienza con el elemento padre
  • Viaja por el árbol DOM hasta el 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 múltiples elementos

De jQuery documentos

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

Básicamente, el elemento de inicio de coincidencia closest elemento actual, mientras que los parents comienzan a unir elementos del elemento principal (un nivel por encima del elemento actual)

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

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