jquery array gibt einen undefinierten zurück?

Question

Ich versuche, ein Array aus HTML-Code zu bekommen Boxen hinzuzufügen, die Zahlen in ihrer ID mit, um meinen Inhalt:

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

Die Boxen hinzuzufügen:

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

Da es sind auch HTML-Zeilen wie folgt:

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

Ich brauche auch etwas, das erkennt, ob es mehrere Werte oder nur einen gibt. In diesem Fall habe ich einfach if (theid.length > 2) verwendet, weil die einzelnen Werte nicht länger als zwei Zeichen werden.

Das Array sollte [38,39,49] und es ist, wie console.log(theid); genau dieses Array zurückgibt.

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); 
}; 

Aber wenn ich dann newHTML zu meinem bestehenden Inhalte hinzufügen content.html(newHTML); gibt es immer eine „undefiniert“ vor den geladenen Boxen? Hier ist ein Screenshot:

Answer 1

Dies ist ein Nebenprodukt der variablen Hebe ist. Da Sie den Operator += verwenden, wird die Zeichenfolge an das Ende der Variablen newHTML angehängt, die zuvor nicht definiert war. Sie können es so aussehen:

//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); 
};