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