Selecteur jQuery pour la gestion d'un click

Version imprimable

Bonjour à tous ,

J'abandonne ... :-)
Je travail sur un site utilisant du jQuery1.3.2 , mais j'ai quelques problème au niveau d'un selecteur a utiliser.

Je souhaiterais tout simplement créer une liste avec un simple lien visible qui permettrait lors du clique sur le lien d'afficher un div intégrer dans cette liste.

Voici donc le code html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <ul> <li class="listgagnant"><a href="#">lien Contenu 1</a> <div>Contenu</div> </li> <li class="listgagnant"><a href="#">lien Contenu 2</a> <div>Contenu</div> </li> <li class="listgagnant"><a href="#">lien Contenu 3</a> <div>Contenu</div> </li> <li class="listgagnant"><a href="#">lien Contenu 4</a> <div>Contenu</div> </li> </ul>
Et voila dans l'idée le JS que je souhaiterais utiliser (et qui ne marche pas bien entendu :-)) :
Code:

1 2 3 4 5 6 $(".listgagnant > div").hide(); $(".listgagnant").click(function(){ $(".listgagnant > div").toggle("fast"); });
Et bien entendu , l'effet s'appliquer sur l'intégralité des divs issue de la classe (et pas uniquement sur le div qui a été cliqué par l'utilisateur).

J'imagine que c'est un problème très simple, mais je n'arrive pas vraiment à trouver le selecteur adapté.

Quelqu'un aurait une piste?

Merci d'avance,
Dart

Bonsoir.

Voici un exemple (voir les commentaires) :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
 
        /* TEST */
        ul#ulgagnantID {
            width:300px;
            height:auto;
            border:1px solid #0000FF;
            margin:12px;
            padding:6px;
        }
        ul#ulgagnantID li div {
            display:none;
            width:auto;
            height: 100px;
            margin:6px;
            padding:6px;
            background-color:#CCCCCC;
            border:1px solid red;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            /*
            * On cherche le parent UL
            * On cherche le numéro d'index du li
            * On applique le toggle uniquement à l'élément d'index i
            */
            $(".listgagnant").click(function(){
                var objUL = $(this).parents("ul");
 
                var i = $("li", objUL).index(this);
 
                // Firefox et Firebug
                // console.log($(objUL)[0] + ", " + i);
 
                $(".listgagnant > div").eq(i).toggle("fast");
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
 
        <ul id="ulgagnantID">
                <li class="listgagnant">
                    <a href="#">lien Contenu 1</a>
                    <div>Contenu</div>
                </li>
                <li class="listgagnant">
                    <a href="#">lien Contenu 2</a>
                    <div>Contenu</div>
                </li>
                <li class="listgagnant">
                    <a href="#">lien Contenu 3</a>
                    <div>Contenu</div>
                </li>
                <li class="listgagnant">
                    <a href="#">lien Contenu 4</a>
                    <div>Contenu</div>
                </li>
        </ul>
 
        <div id="affiche"></div>
    </div>
</body>
</html>

26/09/2009, 21h27
Dartalouf

Bonjour ,

Merci beaucoup, ça a totalement résolu le problème.
Je pensais qu'il y avait une méthode pour traiter ça simplement avec un petit selecteur , je crois que j'aurais pu chercher longtemps :-).

Merci encore,
Dart
27/09/2009, 08h56
danielhagnoul
Bonjour.

J'ai lu votre message hier soir, bien entendu votre réflexion sur la complexité de la solution a fait son chemin dans mon inconscient cette nuit, et comme d'habitude je me réveille avec une solution plus simple donc meilleure.

Il y a souvent plusieurs solutions à un problème.

Il faut comprendre que pour résoudre un problème il est logique de partir de son énoncé, ici :

Code:

$(".listgagnant > div").toggle("fast");

ce qui induisait la recherche du bon index.

Mais le plus simple c'est :
Code:

1 2 3 4 $(".listgagnant").click(function(){ $(this).find("div").toggle("fast"); });
Avec toutes mes excuses pour ce contretemps.