Le Blog du Geek Joyeux

Plus moins vite tu codes, moins plus vite ça plante

Créer ses propres sélecteurs avec jQuery

| Commentaires

Il y a peu, au boulot, on s’est demandé si, avec jQuery, il était possible de sélectionner les éléments dont une classe correspond à modèle donné.

Par exemple, sélectionner tous ceux donc la classe commence par menu_item_.

La réponse est oui, avec jQuery, c’est possible. Voici comment.

Ce que nous cherchons à obtenir, c’est quelque chose dans ce goût là :

1
$('li:classMatch(^menu_item_)')

Il faut en fait créer un sélecteur personnalisé. Cela se fait en définissant une fonction afin d’étendre les sélecteurs standards de jQuery :

1
2
3
$.expr[':'].nomDuFiltre = function(obj, index, meta, stack) {
  // ...
};

Si votre fonction retourne true l’élément est sélectionné, sinon il est rejeté. La fonction reçoit quatre arguments :

  • obj l’élément DOM à tester
  • index le numéro d’itération dans la boucle
  • meta les meta-données de votre sélecteur (dont les arguments)
  • stack la pile de tous les éléments à tester

Les deux arguments qui vont nous intéresser sont obj et meta. Si on regarde le contenu de l’argument meta, on trouve ceci :

1
2
3
4
5
[ ":classMatch(^menu_item_)", // 0
  ":",                        // 1
  "classMatch",               // 2
  "^menu_item_",              // 3
  undefined ]                 // 4

L’entrée qui nous intéresse est donc stockée dans meta[3]. Il ne nous reste donc plus qu’à tester si une des classes de notre élément correspond à la valeur passée et à retourner vrai si tel est le cas :

1
2
3
4
5
6
7
8
9
10
11
12
$.expr[':'].classMatch = function(obj, index, meta, stack) {
  var pattern = new RegExp(meta[3]);
  var classes = obj.className.split(/\s+/);
  var found   = false;

  $.each(classes, function() {
    found = this.match(pattern);
    return !found;
  });

  return found;
};

Nous pouvons maintenant utiliser notre nouveau sélecteur pour trouver les éléments qui nous intéressent.

Commentaires