Je suis le cours de JQuery et quelque chose me chiffonne dans la sélection des éléments. J'ai plusieurs listes (à puces et numérotés) et je voudrais par exemple sélectionner la première liste ayant comme class "rouge".
Mon code HTML est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello World !!</title>
</head>
<body>
<ul class="rouge">
<li class="impair">premier élément de la liste à puces</li>
<li class="pair">deuxième élément de la liste à puces</li>
<li class="impair">troisième élément de la liste à puces</li>
</ul>
<div>
<ul class="bleu">
<li class="impair">premier élément de la liste à puces</li>
<li class="pair">deuxième élément de la liste à puces</li>
<li class="impair">troisième élément de la liste à puces</li>
</ul>
</div>
<ol class="rouge">
<li>premier élément de la liste numérotée</li>
<li>deuxième élément de la liste numérotée</li>
<li>troisième élément de la liste numérotée</li>
</ol>
<script src='jquery-2.1.4.js'></script>
<script src='selection_attribut.js'></script>
</body>
</html>
$(selecteur), c'est une fonction qui va renvoyer une collection d'elements DOM (donc plusieurs) MAIS 'wrappé' dans un object jquery. Cet objet jquery possede plein de fonctions, comme la fonction CSS que tu utilises dans ton exemple.
A partir du moment ou tu utilises [0], tu prends juste UN element de ta collection MAIS SURTOUT tu prends l'element SANS le 'wrapping' jquery autours, tu n'as donc PAS accès a toutes les fonctions de jquery. Si tu ouvres la console de debug javascript tu verras qu'il y a une erreur car tu essayes d'appeler la fonction jquery 'css' sur un element du dom natif, et ça ne marche pas.
Si tu veux le premier element, tu peux faire $('rouge').first().css('color', 'red'). Tu peux aussi faire $('rouge').eq(0).css() (et tu peux mettre eq(1) si tu veux le deuxième, etc)
N'utilisez JAMAIS alert() pour debugger. Utilisez console.log()
J'ai du me tromper dans l'interprétation de ce que je lisais.
Dernière petite question : tu me dis qu'on peut écrire $('rouge').eq(0).css() mais $('rouge:eq(0)').css() fonctionne aussi. Les deux sont bons où le deuxième est à éviter ?
les crochets permettent d'acceder aux elements du dom oui, mais tu récuperes bien un element du dom, pas un objet jquery.
tu pourrais faire (mais c'est moche comme syntaxe et compliqué)
$( $('rouge')[0] )
(je prend le premier $('rouge'), je prend le premier element avec [0] et j'entoure le tout de $() pour en faire un object jquery.
sinon je conseil plutot $('rouge').eq(0).css() comme syntax. Dans ce cas, 0 est bien un 'integer' (un nombre) que tu peux facilement mettre dans une variable et utiliser tel quel.
avec la syntaxe $('rouge:eq(0)').css(), si au lieu de 0 tu as une variable (a=0, ou a = 3 etc) il va falloir faire une concatenation de chaine de caractere un peu tordue :
$('rouge:eq(' + a + ')').css(); // moche
$('rouge').eq(a).css(); // elegant
voila.
je te donne 2 autres conseils concernant les selecteurs css :
1) ne donne JAMAIS un nom de class qui indique a quoi elle ressemble graphiquement. Exemple, avoir une classe "rouge" pour indiquer que ton texte va etre en rouge c'est interressant et pratique, sauf qu'a un moment, les feuilles de styles sont faites justement pour changer l'apparence de ton site SANS toucher le markup HTML. Du coup, si demain, ce que tu considerais etre rouge doit devenir vert, tu vas soit mettre du vert dans ta class "rouge" (tu vois le probleme...) Sois tu va rajouter une classe "vert" et changer tous les appels de "rouge" dans ton code html, ce qui n'est pas fun non plus. Du coup, si en fait de rouge, tu voulais surtout dire que ton texte est important, nomme ta classe "important". Si demain tu veux que ton important, ça soit en gras et en bleu, no probleme.
2) évite d'utiliser des classes css qui servent a la fois a styler ta page ET a les cibler en JS. Si tu veux cibler un element, utilise une classe collé expres pour du genre :
<div class="important js-confirm-link"></div>
La j'ai une classe pour styler mon div ("important") ET une class que je peux utiliser en js, que j'ai préfixé par "js-" -> $('js-confirm-link') PLusieurs avantages :
1) tu sais exactement quels elements sont utilisé pour du js dans ton code HTML, ils ont tous une class qui commence par 'js-'
2) tu peux enlever, rajouter, modifier la class "important", meme la renommer, sans que ton JS ne soit impacté
Voila j'espere t'avoir aidé :)
N'utilisez JAMAIS alert() pour debugger. Utilisez console.log()
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
N'utilisez JAMAIS alert() pour debugger. Utilisez console.log()
N'utilisez JAMAIS alert() pour debugger. Utilisez console.log()
Tognol Charles
contact@charles-tognol.fr
Autodidacte Passionné