¿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 sobre por qué existen ambos.Digamos 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>

Desde el <span> etiquetas que podría usar cualquiera $(this).closest('tr'); o $(this).parents('tr'); para acceder al padre/más cercano <tr> etiqueta.

Answer 1

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

Generalmente, closest es más resistente a refactorizar el código HTML que parent, si eliges el selector con sensatez.

Answer 2

(Nota:La pregunta se editó el día después de haberla formulado, cambiando la pregunta de aproximadamente parent a estar a punto parents [nótese el plural].¡Qué tipo de diferencia!)

Eres tu original pregunta sobre parent (singular) vs. closest: parent Sólo sube un nivel. closest comienza con el elemento actual (no solo el padre) y continúa buscando entre los ancestros hasta que encuentra una coincidencia (o se queda sin ancestros).

Re tu actualizado pregunta acerca de parents (plural) vs. closest:Hay dos diferencias:

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

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

De tu original pregunta:

De las etiquetas podría usar $(this).closest('tr');o $(this).parent('tr');

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

De tu actualizado pregunta:

De las etiquetas podría usar $(this).closest('tr');o $(this).parents('tr');

Tú podrías, proporcionó Que tu tr no está 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 tienes una mesa dentro de una mesa, con parents obtendrás múltiples trs (todo del antepasado tr elementos).

Considere esta estructura:

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

si enganchamos click sobre el span, esto es lo que obtenemos de los tres métodos relevantes:

• $(this).parent('div') - Objeto jQuery vacío, el padre del span no es un div.
• $(this).parents('div') - objeto jQuery con dos divEn él están los divs "interior" y "contenedor" (en ese orden).
• $(this).closest('div') - objeto jQuery con uno div en él, el "interior".

Aquí está el resultado si enganchamos click sobre el span y use span como selector:

• $(this).parent('span') - Objeto jQuery vacío, el padre del span no es un span.
• $(this).parents('span') - Objeto jQuery vacío, el span no tiene antepasado spans.
• $(this).closest('span') - objeto jQuery con el span en eso se hizo clic.

Answer 3

.parent() sólo sube un nivel, mientras closest() incluye el elemento actual y todos los padres.

Ejemplo (seleccionando desde abajo div, x = elementos coincidentes):

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