Aller sur la div suivante

Version imprimable

Bonjour à tous,

Je cherche à faire un truc sûrement facile : cliquer sur un bouton prec ou suiv et aller vers la prochaine div au clic.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <h1>Toto</h1> <a href="depart">Sommaire depart</a> <a href="arrivee">Sommaire arrivee</a> <a href="postsc">Sommaire postsc</a> <div id="depart">donc 1 <div>enfant</div> </div> <div id="arrivee">donc 2 <div>enfant 2</div> </div> <div id="postsc">donc 2 <div>enfant 3</div> </div> <button id="suiv">Suiv.</button> <button id="prec">Préc.</button> <script type="text/javascript"> $("#suiv").click(function () { // ? }); $("#prec").click(function () { //? }); </script> </body> </html>
Comment je fais pour pouvoir cliquer sur n'importe laquelle des ancres ou des boutons et avoir la possibilité de naviguer sur les div directement précédentes ou suivantes dans le code html, sans passer par les div enfants ??

C'est super dur pour moi ça.

Merci à vous,

A bientôt,

LeHibou

16/06/2012, 17h47
NoSmoking

Bonjour,
tu mets les DIV dans un conteneur puis tu récupères les DIV directement enfant

Code:

var lstDiv = $('#conteneur >div');

Tu pourras ensuite parcourir la liste en tenant un index à jour par exemple.

Plein de bonnes info sur les sélecteurs :fleche: Selectors

Au passage il manque un # dans tes liens

Code:

<a href="#depart">Sommaire depart</a>

Ok, c'est une question parent > child.

Le problème, c'est que je n'arrive pas à sélectionner seulement l'élément d'avant commençant par 12 (par exemple) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
  <div id="12depart">donc 1
     <div>enfant</div>
  </div>
  <div id="12arrivee">donc 2
     <div>enfant 2</div>
  </div>
  <div id="12postsc">donc 3
     <div>enfant 3</div>
  </div>
<script type="text/javascript">
$("#suiv").click(function () {
    $('#gen_art >div').prev('id^="12"').css("border", "3px double red");
 
    });
$("#prec").click(function () {
   $('#gen_art >div').next('id^="12"').css("border", "3px double red");
 
    });
</script>

Et je n'ai pas saisi à quoi servait le var lstDiv

16/06/2012, 19h48
BPiero
Salut,

Un id ou une class ne peut pas commencer par un chiffre...
Et puis on comprends rien y'a pas tout le code, il est ou #gen_art?
en gros je traduit:
Code:

1 2 $('#gen_art >div')
Je sélectionne tous les enfants div de #gen_art
Code:

1 2 .prev('id^="12"')
Je sélectionne l'élément précédant le premier enfant de la liste!?

enfin bref, ce que je me demande moi, c'est comment tu peux sélectionner le suivant avec next? à mon avis tu ne peux sélectionner que le deuxième.

Je sais pas si je te laisse réfléchir ou si je te file la soluce...

Bon aller

Bon aller, tu m'as l'air mal barré...
D'abord utilise une class, c'est plus propre

Code:

1
2
3
4
5
6
 
<style>
.selected{
border:3px double red;
}
</style>

Ton html corrigé:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="gen_art">
  <div id="depart12" class="selected">donc 1
     <div>enfant</div>
  </div>
  <div id="arrivee12">donc 2
     <div>enfant 2</div>
  </div>
  <div id="postsc12">donc 3
     <div>enfant 3</div>
  </div>
</div>

et enfin ton js:

Code:

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
$("#suiv").click(function () {
    $('.selected').toggleClass("selected").next().toggleClass("selected");
});
$("#prec").click(function () {
   $('.selected').toggleClass("selected").prev().toggleClass("selected");
});
</script>

@+
BPiero

je préfère réfléchir :)

J'ai besoin de clarifier la situation pour me permettre d'y voir plus clair :

1) je souhaite que si on clique sur un lien <a> qui est en tête de page, on sélectionne la div.
Egalement, à l'arrivée, si aucune div n'est sélectionnée, on arrive sur la div départ.

2) quand on clique sur un lien (sur la page finale, il y en aura 15), admettons #arrivee, il faut que les bouton suiv et prec renvoient sur les div commençant par cc (j'ai changé le 12 en cc, eu égard à la remarque de BPiero) qui sont juste avant.

Mon code complet :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <h1>Toto</h1> <a href="depart">Sommaire depart</a> <a href="arrivee">Sommaire arrivee</a> <a href="postsc">Sommaire postsc</a> <div id="gen_art" <div id="ccdepart">donc 1 <div>enfant</div> </div> <div id="ccarrivee">donc 2 <div>enfant 2</div> </div> <div id="ccpostsc">donc 2 <div>enfant 3</div> </div> </div> <button id="suiv">Suiv.</button> <button id="prec">Préc.</button> <script type="text/javascript"> var $currElement = $("#depart"); $("#suiv").click(function () { $currElement = $currElement.next().css("border", "3px double red"); }); $("#prec").click(function () { $currElement = $currElement.prev().css("border", "3px double red"); }); </script> </body> </html>
Et ça coince encore...

16/06/2012, 20h17
LeHibou2

BPiero,

avec le code que tu m'as donné, les touches prec et suiv ne font rien, il y a juste la classe selected d'encadrée.

Les autres ne réagissent pas au clic de prec et suiv
16/06/2012, 20h21
BPiero

Ah

Je teste et je te dis...
16/06/2012, 20h42
BPiero

Ben ça marche...

Ben ça marche...

Regardes
mon fiddle

?
Ou alors j'ai pas bien compris ce que tu voulais?
Je relis tes posts...
@+
[EDIT]
Bon, LeHibou2, ce qui se conçoit bien s'énonce clairement; et les mots pour le dire, arrivent aisément. (pas de moi) Donc tu tournes sept fois ~~ta langue dans ta bouche~~ tes mains sur ton clavier, et tu me reformules ton but, j'ai rien compris :cry:
[/EDIT]
16/06/2012, 20h59
LeHibou2

Je devais avoir un renard dans mon code.

En copiant le tien, ça marche.
Tout est ok, je vais pouvoir adapter ça à mon code.

Il y a tellement de classes, de selecteurs de choses et d'autres, que je m'en perds !

Merci à tous en tout cas, tout est rentré dans l'ordre.

A bientôt,

LeHibou
16/06/2012, 21h11
BPiero

Résolu

LeHibou2, il faut marquer ton sujet comme résolu.
@+
BPiero
16/06/2012, 21h13
LeHibou2

Tout de suite !

A bientôt