Magazine Internet

Coder votre propre selecteur CSS avec jQuery

Publié le 19 avril 2009 par Dator

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?

Related Posts:


Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: Extend, HTML, jQuery


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Dator 51 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte