Molti utenti hanno dubbi su come verificare se esiste un elemento del DOM HTML utilizzando jQuery. In poche parole, come verificare se un elemento esiste nella pagina nel modo più semplice possibile?
Ci sono diversi modi che possiamo usare per ottenere questo risultato. Uno di questi è controllare se la proprietà “length” del selettore di elementi restituisce un numero maggiore di 0.
Ad esempio, se abbiamo un HTML simile a quello mostrato di seguito.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv">Lorem ipsum dolor sit amet.</div>
9</body>
10</html>
E vogliamo verificare se nel DOM esiste l’elemento “myDiv”, ovvero nella pagina possiamo utilizzare il seguente codice.
1if ($("#myDiv").length > 0) {
2 console.log("The element exists!");
3}
Semplificando il codice
Poiché molte cose in JavaScript sono vere o false, anche il ritorno della proprietà “length” può essere considerato vero o falso. Il ritorno è un numero, 0 rappresenta “falso” e tutto il resto rappresenta “vero”.
Quindi possiamo semplificare il codice come segue.
1if ($("#myDiv").length) {
2 console.log("The element exists!");
3}
Anche rimuovendo il comparativo “> 0”, il valore di ritorno rimane lo stesso.
Creazione di una funzione “esiste” per jQuery
Possiamo andare un po' oltre e aggiungere una funzione denominata “esiste”. Questa funzione può essere utilizzata direttamente con l’elemento che vogliamo controllare.
1jQuery.fn.exists = function() {
2 return ( $(this).length > 0);
3}
4
5var elementExists = $("#myDiv").exists();
6
7console.log(elementExists);
Possiamo migliorare ancora ed evitare che il metodo rappresenti una possibilità di concatenamento. Cosa che in questo caso non è possibile. Lo faremo come segue.
1jQuery.exists = function(selector) {
2 return ( $(selector).length > 0 );
3}
4
5if ( $.exists("#myDiv") ) {
6 console.log("The element exists!");
7}
Si noti che ora passiamo il selettore come argomento alla funzione “esiste”, invece di simulare una catena direttamente dall’oggetto.
Verifica dell’esistenza di un elemento HTML tramite array
Quando utilizziamo un selettore in jQuery, restituisce un array di elementi. Se proviamo ad accedere al primo elemento di questo array e restituisce “undefined”, indica che l’elemento in questione non esiste nel DOM.
1if ( $('#myDiv')[0] ) {
2 console.log("The element exists!");
3}
Come puoi vedere, ci sono diversi modi per verificare l’esistenza di un elemento HTML nella pagina. Qual è la migliore? Bene, quello che risolve il tuo problema. L’importante è che il codice sia in esecuzione e funzionante.