IL genitore() Il metodo in jQuery trova il genitore diretto del selettore specificato. È una funzione integrata in jQuery. Questo metodo attraversa solo un singolo livello nell'albero DOM e restituisce il genitore diretto dell'elemento selezionato.
IL genitore() il metodo è simile al genitori() metodo, poiché entrambi viaggiano fino all'albero DOM e restituiscono l'elemento genitore. Ma la differenza è che il genitori() attraversa più livelli nell'albero DOM e restituisce tutti gli antenati, inclusi un nonno, un bisnonno, ecc. del selezionatore specificato, mentre il genitore() Il metodo attraversa un singolo livello verso l'alto e restituisce solo il genitore diretto del selettore specificato.
Sintassi
$(selector).parent(filter)
IL selettore nella sintassi precedente rappresenta l'elemento selezionato il cui genitore deve essere cercato. IL filtro nella sintassi precedente c'è il parametro facoltativo che specifica l'espressione del selettore, che viene utilizzata per restringere la ricerca.
Esempio 1
In questo esempio non stiamo utilizzando il parametro facoltativo di genitore() metodo. Qui c'è un elemento div che contiene a ul elemento, un titolo h2 e un elemento paragrafo.
Stiamo applicando il genitore() metodo per cercare il genitore dell'intestazione h2. Se usiamo il genitori() metodo invece di utilizzare il metodo genitore() metodo, verranno evidenziati tutti gli antenati dell'intestazione h2, compreso l'elemento body.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 10px; margin: 17px; } function fun(){ $(document).ready(function(){ $('h2').parent().css({ 'font-size': '30px', 'color': 'blue', 'border': '6px dashed blue'}); }); } div <ul> ul <h2> Heading h2 <p> Paragraph element </p> </h2> </ul> click me Provalo adesso Produzione:
Dopo l'esecuzione del codice sopra, l'output sarà:
Dopo aver fatto clic sul pulsante indicato, l'output sarà:
Esempio2
In questo esempio stiamo utilizzando il parametro facoltativo di genitore() per trovare il genitore del primo elemento del paragrafo. Qui ci sono più elementi di paragrafo ma dobbiamo trovare il genitore del primo elemento di paragrafo. Quindi, stiamo passando lo pseudo-selettore ( :Primo ) come valore facoltativo di genitore() metodo.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent(':first').css({'color': 'blue', 'border': '3px dashed blue'}); }); } body div1 div2 <h2> h2 <p> Paragraph element </p> </h2> <h2> h2 <p> Paragraph element </p> </h2> click me Dopo l'esecuzione del codice sopra, l'output sarà:
Dopo aver fatto clic sul pulsante indicato, l'output sarà:
ciclo del programma Java
Esempio3
In questo esempio stiamo utilizzando il parametro facoltativo di genitore() metodo per trovare il genitore specifico del selezionato selettore. Qui ci sono tre elementi di paragrafo con genitori diversi. Stiamo trovando il h2 genitore dell'elemento paragrafo. Quindi, per ottenere lo stesso dobbiamo superare il file h2 come valore facoltativo di genitore() metodo.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent('h2').css({'color': 'blue', 'border': '5px dashed blue'}); }); } body div1 div2 <p> Paragraph element </p> <h2> h2 <p> Paragraph element </p> </h2> <ul> ul <p> Paragraph element </p> </ul> click me Provalo adesso Produzione:
Dopo l'esecuzione del codice sopra, l'output sarà:
Dopo aver fatto clic sul pulsante indicato, l'output sarà:
