Vitesse de la fonction jquery attr() dans Internet Explorer

Question

J'ai quelques menus déroulants HTML, puis en fonction de la sélection, je sélectionne ensuite l'en-tête de colonne approprié dans un tableau. Je le fais en changeant la classe de cette balise css <td> comme ceci:

$("#searchcolour").attr("class", "filledselect"); 
$("#searchtask").attr("class", "filledselect"); 
$("#searchshape").attr("class", "filledselect"); 
$("#searchpivot").attr("class", "filledselect"); 

Les en-têtes de colonnes mises en évidence dépendent de ceux qui ont été sélectionnés. Il peut y avoir jusqu'à 20 en-têtes de colonne sélectionnés. Ce code supplémentaire pour la mise en évidence met un retard de 1-2 secondes sur la mise à jour de ma page dans IE (la jquery filtre également les résultats de la table en même temps). La vitesse dans les autres navigateurs est correcte.

Existe-t-il un moyen plus rapide de réaliser cet effet?

Answer 1

Essayez ceci:

$("#searchcolour").addClass("filledselect"); 
$("#searchtask").addClass("filledselect"); 
$("#searchshape").addClass("filledselect"); 
$("#searchpivot").addClass("filledselect"); 

Answer 2

Cela dépend de la façon dont vous associez les sélections aux cellules du tableau. Mais je suis sûr que cela ne prendra pas 1 à 2 secondes si vous utilisez des sélecteurs d'ID comme vos états d'exemple, donc il doit y avoir un autre goulot d'étranglement. Pourquoi n'appliquez-vous pas un attribut à chaque élément de menu correspondant à l'ID de la table?

<ul id="menu"> 
    <li><a href="#" rel="searchcolour">colour</a></li> 
    <li><a href="#" rel="searchtask">task</a></li> 
</ul> 

<script> 
$('#menu a').click(function() { 
    $('#'+this.rel).addClass('filledselect'); 
}); 
</script> 

Une autre façon d'optimiser votre code existant:

$(['colour','task','shape','viot']).each(function() { 
    $('#search'+this).addClass('filledselect'); 
}); 

Answer 3

Vous pouvez mettre en cache les sélecteurs de colonne de sorte que les éléments DOM ne doivent pas être trouvés à chaque fois:

var $searchcolour = $("#searchcolour"); 
var $searchtask = $("#searchtask"); 
var $searchshape = $("#searchshape"); 
var $searchpivot = $("#searchpivot"); 

... 
    $searchcolour.attr("class", "filledselect"); 
    $searchtaskattr("class", "filledselect"); 
    $searchshape.attr("class", "filledselect"); 
    $searchpivot.attr("class", "filledselect"); 

Ou Au lieu de sélectionner chacune des colonnes, vous pouvez simplement ajouter un ensemble de classes à la table.

Alors faites $ ('# id_for_table'). Attr ('class', 'highlight-c1 highlight-c3') et ajoutez les classes c1, c2, etc. aux cellules que vous voulez mettre en surbrillance. Alors CSS comme ceci:

.hightlight-c1 .c1, 
.hightlight-c2 .c2, 
.hightlight-c3 .c3, 
etc...    { ... } 

Sinon, vous pouvez les nommer des options baisser après vers le bas, de sorte que vous ajoutez une seule classe à la table, mais les cellules à mettre en avant auront cours pour chaque goutte vers le bas qu'ils devraient être mis en évidence pour.