Récupérer valeur target <a>

Bonjour,

j'ai un menu de navigation de ce type

Code:

---

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:

---

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

---

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

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

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

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

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é?

Citation:

---

Envoyé par 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é?

---

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

Code:

---

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" );

---

Citation:

---

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

---

:nono:

Citation:

---

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

---

;)

Sinon

Code:

---

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

---

:nono: Ce n'est pas le tag "li" qui a la classe "selected" ;)

Code:

---

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

---

EDIT : erreur !

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

Code:

---

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

Citation:

---

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() :

Citation:

---

Envoyé par has

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

---

:whistle:

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

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

Code:

---

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);   });

---

Code:

---

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/

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

Code:

---

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"

:oops:

Citation:

---

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:

---

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

---

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?

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

Citation:

---

Envoyé par Bovino

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

:whistle:

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

---

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

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