Come ottenere l'elemento genitore in jQuery

Html

Sono nonno dell'elemento span

• Sono un genitore diretto dell'elemento span
  Io sono l'elemento span
  

Ci sono un totale di quattro elementi generati nel codice sopra, che sono; ,

,
• , E . Osservando la loro gerarchia in quanto sopra
• L'elemento è considerato un genitore diretto dell'elemento,
  è il nonno dell'elemento ed è il bisnonno perché tutti gli elementi sono nidificati all'interno dell'elemento.

  jQuery

  $ (documento).ready (function ()
  $ ("span").genitore().css ("color": "viola", "bordo": "2px solido viola");
  );

  Abbiamo applicato il metodo genitore () sull'elemento e incatenati anche il metodo CSS () per evidenziare il genitore diretto dell'elemento e verificare che sia accessibile l'elemento genitore correttamente.

  Alcuni styling di base vengono applicati anche a questi elementi usando CSS per una migliore dimostrazione e comprensione.

  Produzione

  Il metodo genitore () funziona correttamente e si accede all'elemento genitore correttamente.

  Metodo genitori ()

  Il metodo Parents () funziona in modo simile al metodo genitore () con l'unica differenza che invece di recuperare il genitore diretto prende tutti i genitori dell'elemento specificato.

  Sintassi

  $ (selettore).Genitori (filtro)

  Nota: Il parametro del filtro viene utilizzato per compattare la ricerca dell'elemento genitore specificando un'espressione di selettore ed è facoltativo.

  Esempio

  Per comprendere il metodo del concetto di genitori (), consulteremo lo stesso esempio di sopra e useremo il metodo Parents () anziché il metodo Parent () e vedere come funziona.

  jQuery

  $ (documento).ready (function ()
  $ ("span").genitori().css ("color": "viola", "bordo": "3px solido viola");
  );

  Il codice sopra dovrebbe evidenziare tutti i genitori dell'elemento nello stile specificato dal metodo CSS ().

  Produzione

  L'elemento evidenziato sopra il corpo è l'elemento. Il metodo Parents () lo prende anche perché è anche un genitore dell'elemento specificato.

  Metodo ParentsUNT ()

  Al fine di recuperare gli elementi genili tra due elementi specificati, viene utilizzato il metodo parentunt ().

  Sintassi

  $ (selettore).ParentsUnTil (fermata, filtro)

  Nota: Il parametro del filtro ha la stessa funzione del metodo Parent () e Parents (), tuttavia, il parametro STOP viene utilizzato per indicare l'elemento in cui la ricerca degli elementi genitori dovrebbe essere. Entrambi i parametri sono opzionali.

  Esempio

  Questo esempio illustra il metodo di funzionamento del genitorel ().

  Html

  corpo (pronipoti)
  Div (nonno)
  
  UL (genitore diretto)
  
  • li
    arco
    
  
  
  
  
  

  Abbiamo creato un div e all'interno di quel div abbiamo nidificato tre elementi che sono

  ,
  • , E .

    jQuery

    $ (documento).ready (function ()
    $ ("li").Parentsuntil ("corpo").css ("color": "blu", "bordo": "2px solido blu");
    );

    Nel codice sopra, abbiamo selezionato il

  • elemento e usato il metodo parentuntil () per trovare tutti i genitori tra il
  • , ed elementi.

    Produzione

    Come si può vedere nell'output, tutti i genitori di

  • (div e ul), prima sono stati evidenziati.

    Metodo più vicino ()

    Il metodo più vicino () prende il primo elemento che corrisponde all'elemento specificato.

    Sintassi

    $ (selettore).più vicino (filtro, contesto)

    Nota: Il parametro del filtro ha la stessa funzionalità di altri metodi, tuttavia è richiesto in questo metodo. Il parametro di contesto, d'altra parte, è facoltativo e specifica un elemento DOM all'interno del quale dovrebbe essere trovata una corrispondenza.

    Esempio

    Questo esempio illustra il metodo funzionante del più vicino ().

    Corpo (bis-Grande-Grandparente)
    Div (grande/nonno)
    
    UL (secondo antenato/secondo nonno)
    
    UL (primo antenato/primo nonno)
    
    • li (genitore diretto)
      arco
      
    
    
    
    
    
    
    

    Abbiamo creato un div e all'interno di quel div abbiamo nidificato due

    elementi e uno
    • , elemento.

      jQuery

      $ (documento).ready (function ()
      $ ("span").più vicino ("UL").css ("color": "blu", "bordo": "2px solido blu");
      );

      Abbiamo applicato il metodo più vicino () per evidenziare il primo antenato dell'elemento.

      Produzione

      Come è sottolineato nell'output, il secondo

      L'elemento è il primo antenato dell'elemento.

      Usando i metodi sopra menzionati, è possibile recuperare elementi genili di un elemento HTML specificato.

      Conclusione

      Per recuperare l'elemento genitore in jQuery applicando metodi come genitore (), genitori (), parentunTil () e più vicino (). Il metodo genitore () recupera il genitore diretto di un elemento, il metodo genitori () recupera tutti i genitori di un elemento, parentuntuntil () trova elementi genili tra due elementi specificati e il metodo più vicino () recupera il primo elemento che corrisponde al specificato elemento. Tutti questi metodi, insieme ai loro esempi pertinenti sono spiegati in questa guida.