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

**bilbot** · 28/03/2012, 14h15

Je vous expose mon problème :

J'ai une liste de de checkbox du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bovino** · 28/03/2012, 14h34

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**bilbot** · 28/03/2012, 16h35

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

**Bovino** · 28/03/2012, 16h55

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

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.

**NoSmoking** · 28/03/2012, 17h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 29/03/2012, 08h34

methode intéressante de jquery : serializeArray()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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:

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager