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 :
: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é :
$.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.
$.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.