jquery array restituisce un indefinito?

Question

Sto cercando di ottenere un array di questo codice html aggiungere caselle, avendo i numeri nel loro id, al mio contenuti:

<a href="#" data-box="38,39,40">An Array</a> 

Le scatole di aggiungere:

<div id="box38"> 
    ... 
</div> 
<div id="box39"> 
    ... 
</div> 
<div id="box40"> 
    ... 
</div> 

Come ci sono anche linee di html come questo:

<a href="#" data-box="24">No Array</a> 

ho anche bisogno di qualcosa che rileva se ci sono valori multipli o solo uno. In questo caso ho usato solo if (theid.length > 2) perché i singoli valori non durano più di due caratteri.

L'array deve essere [38,39,49] ed è, come console.log(theid); restituisce esattamente questo array.

var theid = $(this).data('box'); 
var newHTML = ''; 

if (theid.length > 2) { 
    theid = theid.split(','); 
    $.each(theid, function(idx) { 
     newHTML += $('#box' + theid[idx]).html(); 
    }); 
} else { 
    var newHTML = ''; 
    newHTML = $('#box' + theid).html(); 
    console.log(theid); 
}; 

Ma se poi aggiungo newHTML al mio contenuto esistente content.html(newHTML); c'è sempre un "indefinito" davanti alle scatole caricati? Ecco uno screenshot:

Answer 1

Questo è un sottoprodotto di sollevamento variabile. Poiché si sta utilizzando l'operatore +=, la stringa viene aggiunta alla fine della variabile newHTML che in precedenza era indefinita. Puoi guardare in questo modo:

//hoisted 
var newHTML = undefined; 

var theid = $(this).data('box'); 

if (theid.length > 2) { 
theid = theid.split(','); 
$.each(theid, function(idx) { 
    newHTML += $('#box' + theid[idx]).html(); 
}); 
} else { 
/*var */newHTML = ''; 
newHTML = $('#box' + theid).html(); 
console.log(theid); 
};