Cherche une méthode de sélection jQuery

Version imprimable

Bonjour,

J'aimerais savoir comment faire en jQuery pour dire "dans la div #nom, tu me fait une sélection toutes les 3 classe.

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="#nom"> 
   <div class="block"> 
   [...] 
   </div> 
   <div class="block"> 
   [...] 
   </div> 
   <div class="block"> /* block sélectionné */ 
   [...] 
   </div> 
   <div class="block"> 
   [...] 
   </div> 
   <div class="block"> 
   [...] 
   </div> 
   <div class="block"> /* block sélectionné */ 
   [...] 
   </div> 
   <div class="block"> 
   [...] 
   </div> 
</div>

Merci.

30/09/2010, 18h38
marcha
Salut,

Je pense que ça doit être qqch comme ça,
Code:

1 2 $("#nom div.block:nth-child(3n)")
EDIT: ou alors
Code:

1 2 $("#nom div.block:nth-child(3n+2)")
la doc ici

Bonsoir

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
<div id="nom"> 
    <div class="block">
        <p>block 1</p>
    </div> 
    <div class="block"> 
        <p>block 2</p>
    </div> 
    <div class="block"> 
        <p>block 3</p>
    </div> 
    <div class="block"> 
        <p>block 4</p>
    </div> 
    <div class="block"> 
        <p>block 5</p>
    </div> 
    <div class="block">
        <p>block 6</p>
    </div> 
    <div class="block"> 
        <p>block 7</p>
    </div> 
</div>

$(function(){
    // sélectionne uniquement le troisième enfant de la division d'id nom
    // et pas d'id #nom !!!
    // et on peut faire une boucle pour sélectionner le 3*n ième c'est vrai
    //console.log($.trim($("#nom div:nth-child(3)").text()));
    
    // mais on peut utiliser each()
    $("#nom").children("div.block").each(function(i, item){
        if ((i+1) % 3 == 0){
            console.log("i = " + i, " | item = " + item, " | text = " + $.trim($(item).text()));
        }
    });
});

Bonjour,

J'ai essayé vos solution mais ça ne marche pas, voici ce que ça me donne : http://c.imagehost.org/0509/Presse-papiers-1.jpg

Le code XHTML :

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
<div id="slide-wrapper">
                    <!-- Contenu : By Destination -->
                    <h3>By Destination</h3>
 
                        <div class="block">
                            <div class="image">
                                <img src="images/webdesign/slider-home-2/contour-photo.png" alt="" class="contour-photo" width="220" height="106" />
                                <img src="images/photos-slider-home-2/africa.jpg" alt="" class="photo" width="212" height="98" />
                            </div>
                            <h4>Africa Holidays</h4>
                            <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance <br />and variety of wild animals make it 
                            <br />one of the world’s top wildlife holiday destinations.</p>
                        </div>
                        <div class="block">
                            <div class="image">
                                <img src="images/webdesign/slider-home-2/contour-photo.png" alt="" class="contour-photo" width="220" height="106" />
                                <img src="images/photos-slider-home-2/africa.jpg" alt="" class="photo" width="212" height="98" />
                            </div>
                            <h4>Africa Holidays</h4>
                            <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance and variety of wild animals make it 
                            one of the world’s top wildlife holiday destinations.</p>
                        </div>
                        <div class="block">
                            <div class="image">
                                <img src="images/webdesign/slider-home-2/contour-photo.png" alt="" class="contour-photo" width="220" height="106" />
                                <img src="images/photos-slider-home-2/africa.jpg" alt="" class="photo" width="212" height="98" />
                            </div>
                            <h4>Africa Holidays</h4>
                            <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance and variety of wild animals make it 
                            one of the world’s top wildlife holiday destinations.</p>
                        </div>
                        <div class="block">
                            <div class="image">
                                <img src="images/webdesign/slider-home-2/contour-photo.png" alt="" class="contour-photo" width="220" height="106" />
                                <img src="images/photos-slider-home-2/africa.jpg" alt="" class="photo" width="212" height="98" />
                            </div>
                            <h4>Africa Holidays</h4>
                            <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance and variety of wild animals make it 
                            one of the world’s top wildlife holiday destinations.</p>
                        </div>
                        <div class="block">
                            <div class="image">
                                <img src="images/webdesign/slider-home-2/contour-photo.png" alt="" class="contour-photo" width="220" height="106" />
                                <img src="images/photos-slider-home-2/africa.jpg" alt="" class="photo" width="212" height="98" />
                            </div>
                            <h4>Africa Holidays</h4>
                            <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance and variety of wild animals make it 
                            one of the world’s top wildlife holiday destinations.</p>
                        </div>
                        <div class="block">
                            <div class="image">
                                <img src="images/webdesign/slider-home-2/contour-photo.png" alt="" class="contour-photo" width="220" height="106" />
                                <img src="images/photos-slider-home-2/africa.jpg" alt="" class="photo" width="212" height="98" />
                            </div>
                            <h4>Africa Holidays</h4>
                            <p>Few wildlife enthusiasts can resist Africa. Its exceptional abundance and variety of wild animals make it 
                            one of the world’s top wildlife holiday destinations.</p>
                        </div>
                </div> <!-- /slide-wrapper -->

JS :

Code:

$("#slide-wrapper div:nth-child(3n)").css('color', 'red');

Merci

05/10/2010, 20h55
Bovino

En fait, nth-child() effectue le tri sur tous les éléments descendants et vérifie pour chacun s'ils vérifient la condition.
Dans ton cas, il faut passer par eq() et vu que tu as diverses div descendantes, limiter le filtre à la classe voulue :

Code:

$("#slide-wrapper .block:eq(3n)").css('color', 'red');
06/10/2010, 17h33
chok371

Bonjour,

Désolé mais ça marche toujours pas, ce coups ci il me sélectionne rien.:(
07/10/2010, 09h26
marcha

Citation:

Envoyé par chok371

J'ai essayé vos solution mais ça ne marche pas, voici ce que ça me donne : http://c.imagehost.org/0509/Presse-papiers-1.jpg

Je constate que tu n'a pas le résultat que tu souhaites. Mais
si tu pouvais donner une copie écran de ce que tu veux ça m'aiderait.