Meilleur selecteur CSS pour ne pas faire ramer le navigateur avec mon traitement

Version imprimable

28/03/2012, 14h15
bilbot

Meilleur selecteur CSS pour ne pas faire ramer le navigateur avec mon traitement
Je vous expose mon problème :

J'ai une liste de de checkbox du type :

Code:

<input type="checkbox" value="valeur_0" class="checkbox_contact validate[required]" id="checkbox_contact_0" name="checkbox_contact" />

Cette liste peut contenir jusqu'à plusieurs dizaine de checkbox. Mon but est de récupérer les checkbox qui ont été coéchées par l'utilisateur.

A l'heure actuelle, j'utilise le code :
Code:

1 2 3 $('input[name=checkbox_contact]:checked').each(function(){ value += this.value + ';'; });
pour agréger dans une string toute mes "value" pour les checkbox sélectionnées.

Ce code marche très bien pour un petit nombre de checkbox, mais à partir du moment ou ce nombre augment (plusieurs dizaines), cette fonction dure longtemps et dans certains cas sous IE, j'ai une popup m'indiquant qu'un script ralenti internet explorer et risquerait de le faire planter.

J'ai cherché sur le net et pour moi, cette méthode est la meilleure pour effectuer mon traitement. Qu'en pensez vous ? Sinon pensez vous qu'il y a une méthode pour soulager le navigateur ?

Merci d'avance

Olivier

Selon moi, le plus efficace (mais à tester) serait :

Code:

1
2
3
4
5
$('.checkbox_contact').each(function(){
    if(this.checked){
        value += this.value + ';';
    }
});

28/03/2012, 16h35
bilbot

Merci pour ta réponse !
Bon j'ai testé et .... c'est pas plus rapide. Je pense que ya pas possibilité de faire mieux. En passant par le selecteur "input" ca permet de faire un filtrage sur les élément a récupérer (getElementsByTagName) tandis qu'en passant pas la classe, il parcourt tous les éléments du dom et vérifie s'ils ont ou non la class.

Tout ça pour dire que ça ma tout de même permis de me rendre compte que le problème ne venait pas de mon code mais de validationEngine qui bouffait énormément de ressources lors de la validation du formulaire. Du coup je vais faire la validation à la main, car ça passe mieux
28/03/2012, 16h55
Bovino

Non, pas tout à fait, il existe des méthodes plus appropriées que de parcourir l'ensemble du DOM :aie:

Pour la classe, jQuery passe par getElementsByClassName, sinon, jQuery essaye d'utiliser querySelectorAll() et si rien n'est possible (navigateur non conforme ou syntaxe du sélecteur non valide), alors on passe par l'artillerie lourde.
C'est pour cela que ma version devrait être plus efficace.
28/03/2012, 17h22
NoSmoking
Bonjour,
la concaténation, en terme de vitesse n'est pas ce que l'on fait de mieux.
Il vaut le coup d'essayer
Code:

1 2 3 4 5 $('.checkbox_contact').each(function(){ if(this.checked){ result[result.length] = this.value + ';'; } });
puis d'utiliser result.join('');.

Il reste surprenant que pour quelques dizaines de checkbox il y ait une alerte écran.

methode intéressante de jquery : serializeArray()
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script type="text/javascript"> $(function(){ var i=-1; while(++i<100){ $("body").append( $("<input/>").attr({"type":"checkbox","id":"checkbox_contact_"+i,"name":"checkbox_contact"} ).val("valeur_"+i) ) } $("#foo").click(function(){ data=$('[name="checkbox_contact"]:checked').serializeArray() console.log(data) }) }) </script> </head> <body> <input type="button" value="go" id="foo" /> </body> </html>
Résultat dans la console:

Citation:

[Object { name="checkbox_contact", value="valeur_82"}, Object { name="checkbox_contact", value="valeur_83"}, Object { name="checkbox_contact", value="valeur_85"}]

Et pour passer directement au string :
Code:

1 2 3 4 5 6 7 $("#foo").click(function(){ DataString=new Array() $.each( $('[name="checkbox_contact"]:checked').serializeArray(), function(elt, data){DataString.push(data.value) } ) alert(DataString.join(';')) }) })
ou en se rapprochant plus de la solution de NoSmo
Code:

1 2 $.each( $('[name="checkbox_contact"]:checked'), function(index,elt){DataString+=$(elt).val()+";" } ) alert(DataString.replace(/;$/,''))

29/03/2012, 16h57
bilbot

Merci pour toutes vos réponses. Le navigateur incriminé était ie8. Et après différents tests c'est bien le plugin Jquery Validation Engine qui faisait ramer IE.

Merci SpaceFrog pour ta solution car elle m'a permis de découvrir une fonction très utile.