éléments filtrant d'un sélecteur jQuery

Question

j'ai une page qui sélectionne tous les éléments sous une forme et les sérialise comme ceci:

var filter = 'form :not([name^=ww],[id$=IDF] *,.tools *)'; 
var serialized = $(filter).serialize(); 

Cela fonctionne, à moins que le formulaire est autour 600+ éléments. Ensuite, l'utilisateur reçoit une erreur javascript disant que le script est lent et peut rendre leurs navigateurs ne répond pas. Il leur donne ensuite la possibilité d'arrêter l'exécution du script.

J'ai essayé d'exécuter les filtres séparément, j'ai essayé d'utiliser .not sur les sélecteurs, puis les sérialiser, mais je rencontre l'un des deux problèmes. Soit il s'exécute plus vite sans l'erreur, mais aussi ne filtre pas les éléments, ou il filtre les éléments et me donne l'erreur de script lente.

Des idées?

Answer 1

Avec plus de 600 éléments cela va être mort lente. Vous devez offrir à Sizzle (le moteur de sélection de jQuery) des opportunités d'optimisation.

Considérons d'abord le fait que jQuery peut utiliser la méthode querySelectorAll nativement pris en charge (dans les navigateurs modernes) si votre sélecteur est conforme à la CSS3 spec (ou au moins dans la mesure de ce qui est actuellement pris en charge dans les navigateurs).

Avec votre cas, cela signifierait passer un seul sélecteur simple à :not au lieu de 3 (1 simple, 2 complexe).

form :not([name^=ww]) 

Ce serait assez rapide ... même si vous ne pas être bon pour les navigateurs qui ne prennent pas en charge querySelectorAll.

Examinez votre sélecteur et réfléchissez à tout ce que Sizzle a à faire avec chaque élément. D'abord, il doit obtenir TOUS les éléments de la page (vous n'êtes pas pré-qualificatif le sélecteur :not avec un tag/class/id). Ensuite, sur chaque élément, il effectue les opérations suivantes:

(en supposant que sa sortie si le résultat d'un chèque est faux)

1. Vérifiez que le parent a un ancêtre avec le nodeName.toLowerCase() de form.
2. Vérifiez qu'il n'a pas d'attribut name commençant par ww (opération de base indexOf).
3. Vérifiez qu'il n'a pas d'ancêtre avec un attribut id se terminant par IDF. (opération coûteuse)
4. Vérifiez qu'il n'a pas d'ancêtre avec un attribut class contenant tools.

Les deux dernières opérations sont lentes.

Il peut être préférable de construire manuellement une fonction filter, comme ceci:

var jq = $([1]); 
$('form :input').filter(function(){ 

    // Re-order conditions so that 
    // most likely to fail is at the top! 

    jq[0] = this; // faster than constructing a new jQ obj 

    return (

     !jq.closest('[id$=IDF]')[0] 
      // this can be improved. Maybe pre-qualify 
      // attribute selector with a tag name 

     && !jq.closest('.tools')[0] 

     && this.name.indexOf('ww') !== 0 

    ); 

}); 

Remarque: cette fonction est non vérifiée. J'espère que vous avez l'idée ...

Answer 2

Pourriez-vous juste sérialiser tout le formulaire et faire votre filtrage sur le backend? En outre, pourquoi-oh-pourquoi la forme se développe-t-elle à plus de 600 champs?

Answer 3

utiliser le sélecteur :input seulement sélectionner des éléments applicables ..