más eficiente jquery

Question

esta siguiente pieza de código funciona, pero hace que el navegador se vuelva un poco raro. Nada mayor. Me pregunto si habría una manera de hacer esto más eficiente. ¿Puedo utilizar el almacenamiento en caché o de alguna manera llenar uno seleccionar y luego simplemente copiarlo a los otros 5. (hay 6 menús desplegables con una clase de 'máscara' en la página.)

¡Cualquier ayuda sería muy apreciada!

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

Answer 1

Puede crear los nodos de una vez y luego clonar ellos, así:

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

En vez de hacer una gran cantidad de persona anexa a la DOM (que es muy costoso) esta lotes todos los elementos hasta en un fragmento de documento los clona, ​​anexándolos en lotes (un lote por selección).

Answer 2

Es mucho más rápido (alrededor de 3-10 veces, según las pruebas realizadas here) para construir el HTML a sí mismo en una sola cadena:

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

Ver prueba de rendimiento de la comparación de las opciones actuales en este tema: http://jsperf.com/appending-options-jquery