¿Cuál es la diferencia entre .closest() y .parents ('selector')?

Question

¿Cuál es la diferencia entre estos? ¿Es uno más eficiente que el otro? Estoy un poco confundido con el por qué ambos existen. Decir que tengo este marcado:

<table> 
    <tr> 
     <td>...</td> 
     <td><span class='toggle'>Toggle</span></td> 
    </tr> 
    <tr> 
     <td>...</td> 
     <td><span class='toggle'>Toggle</span></td> 
    </tr> 
    <tr> 
     <td>..</td> 
     <td><span class='toggle'>Toggle</span></td> 
    </tr> 
</table> 

De los <span> etiquetas que podría utilizar ya sea $(this).closest('tr'); o $(this).parents('tr'); para acceder a la/<tr> etiqueta más cerca de los padres.

Answer 1

parent devuelve los padres inmediatos (uno para cada elemento en el objeto que llama) o nada si el padre no coincide con el selector. closest devuelve el ancestro coincidente ancestro más cercano para cada elemento (que puede ser el elemento original). La tercera función similar, parents, devuelve todos los antecesores coincidentes (sin incluir el elemento en sí).

Generalmente, closest es más resistente a la refactorización del código HTML que parent, si elige el selector con sensatez.

Answer 2

.parent() solo sube un nivel, mientras que closest() incluye el elemento actual y todos los elementos primarios.

Ejemplo (selección a partir de los div, x = elementos de fondo emparejados):

   parent() parent('body') .closest('div') .parents('div') 
body  
    div              x 
     div  x  <nothing>       x 
this--> div        x 

Answer 3

(Nota: La pregunta se editó el día después de ser pedido, el cambio de la pregunta de aproximadamente parent a ser sobre parents [ observar el plural]. ¿Qué tipo de marca la diferencia!)

Re su pregunta original sobreparent (singular) vs. closest: parent solo sube un nivel. closest comienza con el elemento actual (no solo el padre) y sigue buscando a través de antepasados ​​hasta que encuentra una coincidencia (o se queda sin antepasados).

Re su pregunta actualizada sobreparents (plural) vs. closest: Hay dos diferencias:

1. si el elemento actual se considera (que es con closest, no es con parents).

2. Si la búsqueda se detiene con la primera coincidencia (lo hace con closest, no con parents).

Desde su originales pregunta:

de las etiquetas que podría utilizar cualquiera de $ (this) .closest ('tr'); o $ (esto) .parent ('tr');

No, en realidad. $(this).parent('tr'); devolvería un objeto jQuery vacío, porque el padre del span no coincide con el selector.

Desde su actualizado pregunta:

de las etiquetas que podría utilizar cualquiera de $ (this) .closest ('tr'); o $ (esto) .parents ('tr');

Podría, siempre que su tr no es también dentro de otro tr (por ejemplo, una tabla que contiene una tabla).Si ese es el caso, obtendrás el mismo resultado. Pero si tiene una tabla dentro de una tabla, con parents obtendrá múltiples tr s (todos elementos del antecesor tr).

Considere esta estructura:

<div class="wrapper"> 
    <div class="inner"> 
    <p>Testing <span>1 2 3</span></p> 
    </div> 
</div> 

Si enganchamos click en el span, esto es lo que volver a partir de los tres métodos relevantes:

• $(this).parent('div') - Vaciar objeto jQuery, el padre de el span no es un div.
• $(this).parents('div') - jQuery objeto con dosdiv s en él, los divs "interno" y "envoltorio" (en ese orden).
• $(this).closest('div') - Objeto jQuery con unodiv en él, el "interno".

Aquí está el resultado si enganchamos click en el span y usamos span como selector:

• $(this).parent('span') - Vaciar objeto jQuery, el padre de la span no es un span.
• $(this).parents('span') - Objeto jQuery vacío, span no tiene antecesor span s.
• $(this).closest('span') - objeto jQuery con el span que se hizo clic.