[jQuery] Comment puis-je vérifier si un élément a une classe en particulier ? [À publier]

**SylvainPV** · 30/12/2013, 13h22

Relecteur au rapport :p
Je vais y aller page par page pour que ça reste lisible.
http://danielhagnoul.developpez.com/...mentClass.html

L'exemple 1 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if ( $( "#monID" ).is( ".maClasse" ) ){
   $( this ).show();
}

il manque un # devant monID, et rien n'indique que this corresponde à l'élément #monID

L'exemple 2:
Pour ce usecase précis, on devrait encourager à utiliser un sélecteur plus précis plutôt qu'une condition dans le callback du listener :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$( "div.maClasse" ).on( "click", function(){

On peut revoir l'exemple comme ça :

Lors d'un clic sur une division, si la division a la classe "maClasse" alors colorer le texte en rouge sinon le colorer en bleu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$( "div" ).on( "click", function(){
 
	/*
	 * La construction d'un sélecteur est une opération coûteuse,
	 * on accélère le traitement du code en placant l'objet jQuery
	 * dans une variable.
	 */
	var jObj = $( this );
 
	if ( jObj.hasClass( "maClasse" ) ){		
		jObj.css( "color", "red" );
	} else {
		jObj.css( "color", "blue" );
	}	
});

Là une action a lieu pour toutes les div cliquées, donc le sélecteur large est justifié.

Enfin l'explication sur l'argument "slow" de animate est hors de propos dans cette section. Si on veut faire une FAQ sur l'animation, il faudrait créer une section à part.

**danielhagnoul** · 30/12/2013, 15h52

Q/R modifié.

Merci pour la correction des bogues.
Merci pour les remarques et suggestions, elles sont appréciées même si elles ne figurent pas dans le Q/R modifié.
Attention, il faut souvent relancer la page pour voir la dernière version à cause du cache du navigateur.

Si j'ai bonne mémoire, l'explication sur "slow" a été ajoutée à la demande d'un réviseur de la première version de la FAQ. Je la trouve utile et pertinente.

Pour les Q/R, les exemples et les extraits de code, le champ des possibles est vaste, on ne sera jamais exhaustif et le choix ne plaira jamais à tout le monde. Pourquoi avoir choisi cet extrait plutôt que celui-là lors de la première rédaction de la FAQ : simplement en fonction des questions posées par les débutants dans le forum jQuery à cette époque.

Au sujet de la méthode animate() : si on ne peut pas donner un exemple comportant des méthodes vues ailleurs (d'autres Q/R ou seulement dans l'API), ce n'est plus une FAQ minimaliste. Dans ce cas, je suggère de prendre modèle sur l'API jQuery et de commencer sa traduction, je recommande de vous y mettre tout de suite, car ce sera sans moi. Vu le peu d'intérêt des débutants et des forumeurs en général pour les FAQ, j'ai déjà eu moult preuves de ce désintérêt sur le forum jQuery, je ne vois aucune raison d'y mettre plus d'énergie et d'heures de travail que je l'estime nécessaire.

**vermine** · 30/12/2013, 16h23

L'ajout d'une animation ici n'est pas nécessaire. Cependant, cet exemple montre l'utilisation d'une (l'existence des) animation(s). Ce qui peut servir au visiteur. Tant qu'il n'y a pas une section consacrée aux animations, je propose de laisser l'exemple ainsi.

**danielhagnoul** · 30/12/2013, 17h47

@vermine

Construire un exemple qui utilise une méthode dans un Q/R d'une section de la FAQ et construire une autre section dédiée aux méthodes de ce type n’est pas antinomique.

@SpaceFRog

Merci pour la correction des bogues.
Merci pour les remarques et suggestions, elles sont appréciées même si elles ne figurent pas dans le Q/R modifié.
Attention, il faut souvent relancer la page pour voir la dernière version à cause du cache du navigateur.

Suite son MP, les Q/R ci-dessous ont été modifiés ce matin :

**vermine** · 31/12/2013, 13h09

Je vais réfléchir à la suppression de la question sur l'utilisation des frameworks JavaScript.

Nous en sommes à 4 questions de relues.

**SylvainPV** · 02/01/2014, 18h20

il n'est plus nécessaire de promouvoir ou de défendre jQuery.

ça je veux bien le croire, mais est-ce que inversement on ne pourrait pas parler des cas où jQuery n'est pas utile ?

Beaucoup de développeurs l'incluent par défaut dans leurs projets alors qu'ils n'en utilisent que 10% des fonctions. On devrait parler des alternatives plus légères qui utilisent une sous-partie de l'API jQuery :
http://zeptojs.com/
http://minifiedjs.com/

**danielhagnoul** · 02/01/2014, 18h45

@SylvainPV

Je crois que ces sujets, pertinents, ont leurs places non dans la FAQ jQuery, mais dans une FAQ Frameworks JS.

Je pense à une FAQ minimaliste qui aurait pour seul but d'aiguiller les débutants dans la jungle des possibles ( pourquoi des frameworks, les différents types de frameworks, lequel choisir pour quel type de tâche, pour un type de tâche donné : avantage et inconvénients des disponibles ).

Je ne connais pas encore l'identité du moine bénédiction (au minimum quelqu'un ayant l'expérience de plusieurs frameworks, MVC et autres) qui s'y attellera, mais je lui souhaite courage et persévérance pour les fréquentes mises à jour qui seront sans doute indispensables.

**NoSmoking** · 16/03/2014, 09h52

...et on anime la division en l'agrandissant vers la gauche de 100px puis en la diminuant vers la droite de 100px.

J'indiquerais plutôt que l'on déplace vers la droite puis vers la gauche.

Il me semble également important de rappeler que cela ne fonctionnera que si l'élement est positionné en absolue.

**danielhagnoul** · 18/03/2014, 23h40

Envoyé par NoSmoking

J'indiquerais plutôt que l'on déplace vers la droite puis vers la gauche.

Il me semble également important de rappeler que cela ne fonctionnera que si l'élement est positionné en absolue.

Q/R modifié : http://danielhagnoul.developpez.com/...mentClass.html

Merci pour la correction des bogues.
Merci pour les remarques et suggestions, elles sont appréciées même si elles ne figurent pas dans le Q/R modifié.
Attention, il faut souvent relancer la page pour voir la dernière version à cause du cache du navigateur.

**vermine** · 19/03/2014, 08h36

Je testerai pour l'histoire du gauche-droite, droite-gauche. Et choisirai ce qui me semble le plus visuellement compréhensible.

**danielhagnoul** · 19/03/2014, 09h40

Il n'y a plus rien à tester ! La correction de NoSmoking était nécessaire, c'est bien un déplacement avec le code actuel.

Lorsque j'ai écrit le texte, c'était pour un autre code qui réalisait un agrandissement (action sur width au lieu de left) mais j'ai changé le code pour ne pas percuter le bord gauche de la page et j'ai oublié le texte, erreur typique.

**vermine** · 19/03/2014, 10h08

Je suis bien d'accord avec la notion de "déplacement", mais je pense que la notion de "direction" est inversée. Il me semble que c'est d'abord vers la droite, ensuite vers la gauche.

**danielhagnoul** · 19/03/2014, 21h42

Oops !

Franchement, on se pose des questions. C'est vrai qu'il a encore de la fièvre le Daniel, mais tout de même on va finir par se demander si ses facultés mentales n'ont pas été atteintes par les virus.

Honnêtement, je crois que si

, je viens encore d'en avoir la preuve dans un problème IRL. Je n'arrive pas à me concentrer et à travailler convenablement pour le moment. Ici c'est une véritable épidémie, toutes les personnes que je connais ont été ou sont malades.

Je vais attendre d'aller un peu mieux pour m'y remettre, que cela ne vous empêche pas de continuer la relecture.

Q/R modifié : http://danielhagnoul.developpez.com/...mentClass.html

Merci pour la correction des bogues, les remarques et les suggestions. Elles sont appréciées même si elles ne figurent pas dans le Q/R modifié.
Attention, il faut souvent relancer la page pour voir la dernière version à cause du cache du navigateur.

[jQuery] Comment puis-je vérifier si un élément a une classe en particulier ? [À publier]

Contributions JavaScript / AJAX

Discussions similaires

Partager

Partager