plus efficace jquery

Question

Ce morceau de code suivant fonctionne, mais il rend un peu bizarre le navigateur. Rien de majeur. Je me demande s'il y aurait un moyen de rendre cela plus efficace? Puis-je utiliser la mise en cache ou peupler d'une manière ou d'une autre, puis la copier dans l'autre 5. (Il y a 6 listes déroulantes avec une classe de 'masque' sur la page.)

Toute aide serait grandement appréciée!

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

Answer 1

Vous pouvez créer les nœuds une fois puis clone, comme ceci:

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

Au lieu de faire beaucoup d'individu ajoute au DOM (ce qui est très coûteux), lots tous les éléments en place dans un fragment de document, les clone ensuite, en les ajoutant par lots (un lot par sélection).

Answer 2

Il est beaucoup plus rapide (environ 3-10 fois, comme testé here) pour construire le code HTML vous-même dans une seule chaîne:

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

Voir test de performance comparant les options actuelles dans ce fil: http://jsperf.com/appending-options-jquery