jquery più efficiente

Question

questo seguente pezzo di codice funziona, ma in qualche modo rende il browser un po 'strano. Niente di importante. Mi chiedo se ci sarebbe un modo per renderlo più efficiente? Posso usare la cache o in qualche modo popolare una selezione e poi semplicemente copiarla sull'altra 5. (ci sono 6 menu a discesa con una classe di "maschera" sulla pagina.)

Qualsiasi aiuto sarebbe molto apprezzato!

$('.mask').each(function() { 
    $(this).append($('<option/>').val("").text("")); 
    for (var i = 1; i < 256; i++) { 
     $(this).append($('<option/>').val(i).text(i)); 
    } 
    }); 
}); 

Answer 1

È possibile creare i nodi una volta poi clonare, in questo modo:

var temp = $('<select/>'); 
$('<option/>').val("").text("").appendTo(temp); 
for (var i = 1; i < 256; i++) { 
    $('<option/>').val(i).text(i).appendTo(temp); 
} 
temp.children().clone().appendTo('.mask'); 

Invece di fare un sacco di individuo accoda al DOM (che è molto costoso) questo lotti tutti gli elementi fino in un frammento di documento li clona poi, aggiungendoli in gruppi (un lotto per selezione).

Answer 2

E 'molto più veloce (circa 3-10 volte, come testato here) per costruire il codice HTML se stessi in una singola stringa:

var html = "<option value=''></option>"; 
for (var i = 1; i < 256; i++) { 
    html += "<option value='" + i + "'>" + i + "</option>"; 
} 
$(".mask").append(html); 

See test di performance a confronto le opzioni correnti in questa discussione: http://jsperf.com/appending-options-jquery