Javascript Trova Elemento

| | |

Il metodo jQuery find() può sembrare familiare, ma non confonderlo con il metodo JavaScript find()! Entrambi "find" cose, ma ciò che restituiscono può essere molto diverso. In JavaScript, il metodo find() può essere chiamato solo su un array.

Richiede una funzione di callback, che è una funzione passata a un metodo come argomento , da chiamare in seguito. Trova e restituisce il primo elemento che ha soddisfatto i requisiti delineati nella funzione di callback.

Il metodo jQuery find() è abbastanza diverso. Come tutti i metodi jQuery, viene chiamato su un selettore. Cerca all’interno di quel selettore e manipola solo gli elementi figlio di quel selettore. Questo alto livello di manipolazione è utile se vuoi cambiare alcuni elementi e non altri che sono contenuti nello stesso elemento genitore.

Uso di jQuery find()

Ora sappiamo jQuery find() è usato per selezionare tutti gli elementi figli di un dato selettore. Dai un’occhiata ad alcuni esempi di codice per vedere come usare jQuery find().

Cominciamo in modo semplice e aggiungiamo un po’ di complessità in ulteriori sezioni. Possiamo manipolare un elemento dopo il caricamento della pagina per illustrare come funziona find(). Che ne dici di cambiare il colore di alcune parole nel contesto di un paragrafo una volta caricata la pagina? Inizieremo da qui:

Ogni altra parola resterà la stessa.

Guarda questo codice e noterai all’interno del

sono alcuni elementi elementi. Uno dei elementi è figlio di

elemento. L’altro è un figlio del

IR3bnpJdRzIwsq1CzCQeT4Lf2F4YaVtdHjwqHecFlqkjNYR Oi9DIefQs IX6Kf1Bh0JQQNYqxQG7okIP98RPQ PYHTDhu AOabwfhnwB4rdWRmoMw5WgSDtLIKD5ZU9bX4q7VkI

Il nostro HTML sta visualizzando. Ora cambieremo i colori del testo per illustrare find() in azione. Questo è un ottimo passo per principianti perché abbiamo solo bisogno per modificare un attributo CSS per ottenere ciò. Passando l’elemento

come nostro selettore a find(), possiamo usare il metodo css() di jQuery per renderizza i cambiamenti di colore:

Nel primo utilizzo di find(), stiamo selezionando tutti i

elementi. Usiamo find() per individuare qualsiasi elementi che sono figli di

. In questo esempio, è solo la parola blu. Usiamo quindi il metodo css() per cambiare il colore in blu.

Al secondo utilizzo di trova(). Questa volta stiamo selezionando il .

Ancora una volta, questa è solo la parola verde. Come la prima riga, stiamo usando il metodo css() per cambiare il colore in verde.

Eseguiamolo e vediamo cosa succede!

NmmVK1C X Z30uO5sa15iVH9aCEO ASkwA4cuqwxOagZqMkO8QpJd AlJeZH2NXXSALKH8lWknoNiwXquCqxMuztLiG CL0FzyoN60rr OR3aktZVCcmRgyHPk7Fd7hsjGON74Pi

Nota che entrambe le parole blue e green sono state racchiuse in un elemento span senza classe o id assegnati. Siamo stati in grado di isolare ancora quelle parole e cambiarne il colore. Come avrai intuito, è perché gli elementi principali di sono diversi.

Il

è il genitore del della parola blu. La è il genitore del contenente la parola verde.

Questo è successo perché find() individua i figli degli elementi usati come selettore. Aggiungiamo un po’ di complessità e guardiamo un esempio di una lista di cose da fare.

jQuery find() in una lista

In questo esempio, abbiamo una lista di cose da fare. Abbiamo cose da fare oggi, ma dobbiamo anche comprare cose al negozio per fallo. Una volta acquistati questi articoli, possiamo eliminarli dall’elenco e andare avanti con la nostra giornata! Ecco la nostra lista:

Qui abbiamo la nostra lista. Abbiamo il

  • ; elementi di "Vai al negozio," "Porta fuori la spazzatura," e "Lava i piatti," come figli dell’elemento