Avec jQuery nous pouvons sélectionner un ou plusieurs éléments grâce à des sélecteurs CSS comme par exemple :

$("monselecteur:first")

Je vais vous montrer aujourd’hui une petite astuce pour créer votre propre sélecteur !

Ce que nous voulons

Nous voulons un sélecteur qui permet de savoir si le contenu HTML d’un élément est supérieur à 1000. Cela peut être pratique dans un tableau récapitulatif pour surligner les cases importante (supérieures à 1000).

Le html





1400
700
400




2500
600
100




100
1100
900

Réalisation

Nous allons étendre les fonctionnalité de jQuery et lui ajouter un sélecteur :

$.extend($.expr[':'], {
    // on nomme notre sélecteur
    moreThanAThousand : function (a){
		// on cherche notre élément
		return parseInt($(a).html()) > 1000;
	}
});  

$(document).ready(function() {
       // utilisation
	$('td:moreThanAThousand').css('background-color', '#ff0000');
});

Ici on sélectionne tous les éléments qui ont un contenu HTML supérieur à 1000 et on leur met une couleur de fond rouge ! Simple non?