Discussion :

[CedriZero]

Bonjour,

j'ai un menu de navigation de ce type

Code html :

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

1
2
3
4
5
6
7
<nav>
	<ul>
		<li><a href="#page1">Page 1</a></li>
		<li><a class="selected" href="#page2">Page 2</a></li>
		<li><a href="#page3">Page 3</a></li>
	</ul>
</nav>

j'aimerai récupérer la target du <a> qui se trouve après le <a> avec la class "selected"

J'ai bien essayé plusieurs chose mais rien ne fonctionne voici ce que j'ai testé en dernier:

Code :

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

var targetNext = $("a:hasClass(selected)").next().attr("href");

Si quelqu’un a une idée
Merci d'avance

[Bovino]

Les balises <a> n'ont pas de balises frères, donc la notion de .next() n'a pas de sens.

[CedriZero]

d'accord merci,
alors comment je peut faire,
se servir du <li>?

[Bovino]

Oui, il faut remonter, aller au suivant et redescendre dans l'arborescence.

[CedriZero]

Ok
donc en gros je fait un parent() pour remonter au <li> puis un next() pour accéder au prochain <li> et enfin un children() pour accéder au <a> recherché?

[danielhagnoul]

Ok
donc en gros je fait un parent() pour remonter au <li> puis un next() pour accéder au prochain <li> et enfin un children() pour accéder au <a> recherché?

En gros et en détail, oui ! Mais...

Code :

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

1
2
3
4
5
6
7
/*
 * Il y a plusieurs chemins pour aller à Rome.
 * 
 * Si vous cherchez la valeur de l'attribut href
 * du tag a ayant la classe "selected"
 */
var targetNext = $( "nav > ul" ).find( "a[class='selected']" ).attr( "href" );

[Bovino]

* Si vous cherchez la valeur de l'attribut href
* du tag a ayant la classe "selected"

j'aimerai récupérer la target du <a> qui se trouve après le <a> avec la class "selected"

Sinon

Code :

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

$('li').has('.selected').next().find('a').attr('href');

[danielhagnoul]

Ce n'est pas le tag "li" qui a la classe "selected"

Code :

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

var targetNext = $( "nav > ul" ).find( "a[class='selected']" ).next().attr( "href" );

EDIT : erreur !

[CedriZero]

Merci pour votre aide a tous les deux,
cependant je n'arrive pas a faire fonctionner ma fonction:

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
16
17
 
$(window).keypress(function(e){
	var code = e.keyCode;
	//Fleche bas
	if( code  == 40){
	var target = $( "nav > li" ).find( "a[class='selected']" ).next().attr( "href" );
	alert(target)
	}
 
	//Fleche haut
	if( code  == 38){
	var target = $( "nav > li" ).find( "a[class='selected']" ).prev().attr( "href" );
	alert(target)
	}
	maFonction(target);
 
});

les alert me retourne undefined

[Bovino]

Ce n'est pas le tag "li" qui a la classe "selected"

Non je sais, c'est pour ça que j'utilise la méthode .has() :

Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

En revanche, dans ton code, la balise <a> n'ayant pas de frère, .next() renvoie un tableau vide !

[CedriZero]

J'ai donc essayer avec ceci
mais c'est pareil alert = undefined

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
16
17
 
$(window).keypress(function(e){
	var code = e.keyCode;
	//Fleche bas
	if( code  == 40){
	var target = $('li').has('.selected').next().find('a').attr('href');
	alert(target);
	}
	//Fleche haut
	if( code  == 38){
	var target = $('li').has('.selected').prev().find('a').attr('href');
	alert(target);
	}
 
	maFonction(target);
 
});

[SpaceFrog]

Code html :

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

1
2
3
4
5
6
7
<nav>
	<ul>
		<li><a href="#page1">Page 1</a></li>
		<li><a class="selected" href="#page2">Page 2</a></li>
		<li><a href="#page3">Page 3</a></li>
	</ul>
</nav>

=> http://jsfiddle.net/gEXms/

[CedriZero]

ceci fonctionne parfaitement si la class selected est ecrite en dur dans la page je viens de tester

Code :

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

alert($('.selected').parent().next('li').find('a').attr('href'));

cependant moi je le fait en fonction de la position de mon scroll avec le addClass
et la ça ne marche pas pourtant dans mon firebug je vois bien que mon <a> a la class "selected"

[Bovino]

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method.

Code :

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

$('li').has('.selected').next().find('a').prop('href');

[CedriZero]

La fonction de Bovino fonctionne aussi sauf quelle me retourne le href avec l'url complète du site.
Enfin bref ça n'explique pas pourquoi si la class est ajouté par le addClass ça ne fonctionne pas non?

[Bovino]

J'ai pourtant mis l'explication...

Pour plus de détails.
Lorsque tu construis ta page HTML, tu mets des attributs à des balises.
Mais ensuite, lorsque tu manipules les objets JavaScript du DOM, tu ne manipules pas des balises HTML mais des propriétés d'objets JavaScript associés.
Il y a bien, à la construction du DOM, une similitude entre les deux puisque les propriétés des objets HTMLElement sont initialisées à partir des attributs HTML, mais quand tu les modifies en JavaScript, cette liaison se perd.
Donc avec jQuery, .attr() récupères des valeurs d'attributs HTML (HTMLElement.getAttribute('attr');)
alors qu'avec .prop() tu récupères des propriétés JavaScript (HTMLElement.prop;).
J'avais fait à une époque une page d'exemple pour illustrer ça : http://dmouronval.developpez.com/tes...Attributs.html

[danielhagnoul]

Non je sais, c'est pour ça que j'utilise la méthode .has() :



En revanche, dans ton code, la balise <a> n'ayant pas de frère, .next() renvoie un tableau vide !

Oops ! j'ai lu trop vite, je n'avais pas lu : has()

[CedriZero]

Merci beaucoup de l'explication j'avais compris mais pas tout, et c'est vrai que je ne savais pas la différence entre les deux.
Par contre j'ai bien mis le .prop comme vous me l'avez suggérez mais c'est toujours la même chose j'ai undefined si le "selected" est ajouté avec le addClass