Vous pourriez préférer naviguer sur la version spécifique iPhone / iPod Touch de ce site...

Comment définir dans jQuery ses propres filtres de sélection

Date de publication
5/juillet
2007
Commentaires
aucun commentaire
Tags
, , ,

Article initialement publié dans le weblog de Clever Age.

La librairie Javascript jQuery est en train de se répandre à grande vitesse, mais malgré une documentation assez complète, certains points restent obscurs. Voici par exemple comment créer votre propre filtre de sélection.

Le besoin particulier qui m’a conduit à trouver la solution que je vais exposer ici est de sélectionner des éléments dont le contenu texte est exactement égal à une chaine de caractères donnée.

jQuery propose le filtre contains() qui permet d’identifier des éléments qui contiennent la chaine de caractères ’text’, de l’une des manières suivantes :

$('element').contains('text')...
$('element:contains(text)')...
Télécharger

Malheureusement, ce filtre ne permet pas d’identifier des éléments qui contiennent exactement la chaine 'text', donc il faut le faire soit-même.

La solution directe, sans étendre jQuery, est d’utiliser filter() :

$('element').filter(function() {
  return $(this).text() == 'text';
}
Télécharger

Si cela est réalisable une ou deux fois dans un code relativement peu volumineux, il devient vite pénible de recopier tout ce code pour une opération qu’on imaginerait plus simple.

Heureusement, il est possible d’étendre jQuery, soit par des plugins soit directement jQuery lui-même et ses éléments, dont ses filtres. Cette dernière possibilité n’est par contre pas bien — voire pas du tout [1] — documentée.

Voici ce que ça donne pour le besoin particulier exprimé précédemment :

jQuery.extend(jQuery.expr[':'], {
     containsExactly: "$(a).text() == m[3]"
});
Télécharger

Une fois ceci fait, il est possible de filtrer les éléments de la manière suivante :

$('element:containsExactly(text)')...

Simple, n’est-ce pas ?

Ce qu’il faut savoir pour écrire ses propres filtres est surtout la définition des variables disponibles. Vous avez sans doute vu ces étranges a et m[3] dans le code ci-dessus. La première impression pourrait être que cela ne permet de filtrer que les éléments de type lien — balise <a> — mais il n’en est rien, ce a n’est qu’un nom de variable.

Voici donc la fameuse liste des variables, grâce à ce mail de Danny Wachsstock sur la liste de discussion jQuery :

  • a pour l’élément à filtrer
  • m[3] pour ce qui est entre parenthèses dans le sélecteur
  • i pour l’index de l’élément à filtrer
  • r pour le tableau complet d’éléments

Comme indiqué dans le mail cité précédemment, vous trouverez de nombreux exemples dans cette liste de sélecteurs aditionnels.

A vous de jouer !

Notes

[1] Espérons juste que cette absence de documentation n’implique pas une pérennité douteuse

RSS

Commentaires

Commenter cet article

RSS

Derniers articles

Derniers commentaires