Sélectionner des éléments CSS grâce à jQuery est un jeu d’enfant, et c’est ce qui d’ailleurs en a fait tous son succès.

Mais en plus des sélecteurs CSS, jQuery a introduit les sélecteurs personnalisés, ils permettent un code plus simple et une meilleure lisibilité.

Exemples de sélecteurs personnalisés jQuery :

1
:header,:even,:odd,:animated,:contains(text), etc...

Et le meilleur c’est que jQuery vous laisse créer et définir vos propres sélecteurs comme dans le script ci dessous.
Exemple de création de sélecteur personnalisé :

1
2
3
4
5
6
7
8
9
10
11
$.expr[':'].test = function(obj, index, meta, stack){
// obj - is a current DOM element
// index - the current loop index in stack
// meta - meta data about your selector
// stack - stack of all elements to loop
// Return true to include current element
// Return false to exclude current element
};
 
// Usage:
$('.someClasses:test').doSomething();

Maintenant créons un simple sélecteur personnalisé avec le script ci dessus. Nous voulons un sélecteur personnalisé jQuery qui renvoie les éléments html avec l’attribut rel non-vide.

1
2
3
4
5
$.expr[':'].withRel = function(obj){
var $this = $(obj);
return($this.attr('rel') !='');
};
// Usage:$('a:withRel').css('background-color','yellow');

Le code ci dessus créé un sélecteur personnalisé qui ne renvoie que les éléments qui ont l’attribut rel non-vide.

Vous serez peut être aussi intéressé par ceci : jQuery custom functions.

Ou encore ceci : custom jQuery selectors with parameters.