Aller sur la div suivante

**LeHibou2** · 16/06/2012, 14h54

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 :

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

**NoSmoking** · 16/06/2012, 17h47

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

Code :

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

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

Selectors

Au passage il manque un # dans tes liens

Code html :

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

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

**LeHibou2** · 16/06/2012, 19h23

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 :

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

**BPiero** · 16/06/2012, 19h48

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 :

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

1
2
 
$('#gen_art >div')

Je sélectionne tous les enfants div de #gen_art

Code :

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

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...

**BPiero** · 16/06/2012, 19h59

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

Code :

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

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

Ton html corrigé:

Code :

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

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 :

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

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

**LeHibou2** · 16/06/2012, 20h08

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 :

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
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...

**LeHibou2** · 16/06/2012, 20h17

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

Aller sur la div suivante

jQuery

Vue hybride

Discussions similaires

Partager

Partager