[Résolu] Ajout d'une classe dans sur une balise parent

bonjour

j'utilise un cms qui me produit le code suivant :

<ul class='nav'>
[...]
<li><a title="Galerie" href="/page/gallery">Galerie</a></li>
<li><a title="Accueil" href="/pages/home" class="active">Accueil</a></li>
[...]
</ul>

j'aurais souhaité avoir le code suivant

<li  class="active"><a title="Accueil" href="/pages/home">Accueil</a></li>

mais comme je n'ai pas la main pour modifier le code html produit, je pensais passer par du jquery pour arriver à mes fins

je suis arrivé à écrire ce bout de code

jQuery(document).ready(function($) {
	if ($('.nav li a.active').length){
		$('.nav li').addClass('active');
		$('.nav li a.active').removeClass('active');
	}
});

mais cela ne fonctionne pas car cela ajoute la classe 'active' à tous les <li>, ce qui n'est pas le but

pouvez-vous m'aider à trouver la syntaxe pour ajouter une classe à une balise parent quand une balise fille répond à une condition donnée ?
Modifié par vincent3569 (01 Apr 2012 - 18:01)

C'est assez simple, regarde pour les fonctions .parent(), .parents() ou .closest() de jQuery. Et choisit celle qui répond le mieux à tes besoins !

merci

c'est que j'ai fait en parallèle à mon message

je suis arrivé à

jQuery(document).ready(function($) {
	if ($('.navbar .nav li > a.active').length){
		$('.navbar .nav li > a.active').parent().addClass('active');
		$('.navbar .nav li > a.active').removeClass('active');
	}	
});

Modifié par vincent3569 (01 Apr 2012 - 18:49)

Salut, je crois que tu as bien compris le principe. Cela dit, tu pourrais optimiser ton code ainsi:

(function($) {
	$(function () {
		$('.navbar .nav li > a.active')
			.removeClass('active')
			.parent('li')
			.addClass('active');
	});
}(jQuery));

Rappel toi que chaque fois que tu appelle la fonction $(), jQuery recherche encore le sélecteur à travers le dom, donc il faut appeller la fonction le moins souvent possible.

De plus, tester la présence de l'élément avant d'enclencher les actions est inutile puisque si l'élément n'est pas trouvé, le code suivant ne s'exécutera pas puisque le fonction ne renverra aucun élément du DOM.

De même, n'hésite pas à chainer tes fonctions pour optimiser ton code, et une bonne pratique consiste à spécifier le type de parent recherché à la fonction .parent() afin de s'assurer qu'une modification au code n'engendra pas de comportement involontaire...

bonjour

merci de ton aide !

ceci dit, je crois que je ne comprends pas toute la syntaxe que tu as utilisé (ni la mienne d'ailleurs car je reproduisbeaucoup de code jQuery par mimétisme ).

peux-tu m'expliquer un peu plus ce que signifie cette écriture ?

(function($) {
	$(function () {
		....
	});
}(jQuery));

en particulier, je dois manipuler un certain nombre de sélecteur.

pour chaque sélecteur, je dois dupliquer

$(function () {
		....
	});

ou bien réaliser chaque opération à l'intérieur de cette fonction ?

merci d'avance de ton aide
Modifié par vincent3569 (12 Apr 2012 - 15:46)