Qual è la differenza tra .closest () e .parents ('Selector')?

Question

Qual è la differenza tra questi?È uno più efficiente dell'altro?Sono un po 'confuso sul perché esistono entrambi.Dì che ho questo markup:

<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>

.

Dai tag <span> potrei usare $(this).closest('tr'); o $(this).parents('tr'); per accedere al tag Genitore / <tr> Genitore.

Answer 1

parent restituisce i genitori immediati (uno per ogni elemento nell'oggetto chiamante) o nulla se il genitore non corrisponde al genitoreselettore. closest restituisce il più vicino antenato antenato antenato per ciascun elemento (che può essere l'elemento originale).La terza funzione simile, parents , restituisce tutti gli antenati corrispondenti (escluso l'elemento stesso).

Generalmente, closest è più resistente al refactoring del codice HTML rispetto a parent, se si sceglie il selettore sensibilmente.

Answer 2

(Nota: la domanda è stata modificata il giorno dopo essere stato chiesto, modificando la domanda su parent per essere su parents [nota il plurale]. Quale tipo di fa differenza!) Re Your Original Domanda su parent (Singolare) vs. closest: parent Solo nemmeno uno livello. closest inizia con l'elemento corrente (non solo il genitore) e continua a cercare attraverso gli antenati finché non trova una partita (o esaurisce gli antenati ).

Re è il tuo aggiornamento Domanda Informazioni su parents (Plurale) vs. closest: Ci sono due differenze:

.

1. Se l'attuale elemento è considerato (è con closest, non è con parents ).

2. Se la ricerca si arresta con la prima partita (fa con closest, non con parents).

   Domande Original :

   .

   Dai tag potrei usare $ (questo) .closest ('tr'); o $ (questo) .parent ('tr');

   No, in realtà. $(this).parent('tr'); restituirebbe un oggetto jquery vuoto, poiché il genitore del span non corrisponde al selettore.

   Dazione Aggiornato Domanda:

   .

   Dai tag potrei usare $ (questo) .closest ('tr'); o $ (questo) .parents ('tr');

   È possibile, fornito che il tuo tr non è anche all'interno di un altro tr (ad esempio una tabella contenente una tabella). Se è così, otterrai lo stesso risultato. Ma se si dispone di un tavolo all'interno di un tavolo, con parents riceverai più generatori generacodicitagcodes ( Tutto degli elementi tr antenati).

   Considera questa struttura:

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

   .

   Se amiamo tr sul click, questo è ciò che recutiamo dai tre metodi pertinenti:

   .
   • span - Object Jquery vuoto, il genitore del $(this).parent('div') non è un span.
   • div - Oggetto jQuery con Due $(this).parents('div')s in esso, i div "interni" e "wrapper" (in quel ordine).
   • div - Genery Object con One $(this).closest('div') in esso, "Inner".

     Ecco il risultato se amiamo div sul click e utilizza span come selettore:

     .
     • span - Object Jquery vuoto, il genitore del $(this).parent('span') non è un span.
     • span - Object jquery vuoto, il $(this).parents('span') non ha generatori antenati.
     • span - Oggetto jQuery con span che è stato cliccato.

Answer 3

.parent() aumenta solo un livello, mentre closest() include l'elemento corrente e tutti i genitori.

Esempio (Selezione dal basso div, x= Elementi corrispondenti):

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

.