Vi siete mai chiesti come verificare se un elemento esiste utilizzando un selettore jQuery? Beh, forse no, ma io ho si, così ho pensato di condividere come si fa qui.

La cosa più ovvia sarebbe semplicemente quella di utilizzare un’istruzione if, ma non è corretto.

if ($("#selettore"))
{
  // fai qualcosa ...
}

Non funziona perchè quando si utilizza un selettore, jQuery restituisce sempre un oggetto. Quindi l’istruzione “if” sarà sempre vera.
Nel caso di un elemento che non esiste nella pagina, jQuery restituirà un oggetto vuoto. Proprio per questo motivo, possiamo anche utilizzare la proprietà length, che restituisce la dimensione dell’oggetto. Modifichiamo la nostra “if” in:

if ($("#mydiv").length > 0){
{
  // fai qualcosa ...
}

//oppure con un'istruzione equivalente ...
if ($("#mydiv").length){
{
  // fai qualcosa ...
}

Ora funziona perché quando jQuery restituisce un oggetto vuoto, la proprietà length restituirà zero e quindi l’istruzione “if” sarà falsa.

Avevo la necessità di ripopolare una select dinamicamente, a partire da una sequenza statica.

<select id="selectBox">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

Per cancellare tutte le option basta usare la funzione JQuery “empty”:

$('#selectBox').empty();

Per ripopolare le option:

$('#selectBox').append('<option>New Option</option>');
$('#selectBox').append('<option>New Option1</option>');
...

Per fare il tutto in un colpo solo:

$('#selectBox').empty().append('<option>New Option</option>').append('<option>New Option1</option>');