Discussion :

[chok371]

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 :

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

[marcha]

Salut,

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

Code :

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

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

EDIT: ou alors

Code :

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

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

la doc ici

[danielhagnoul]

Bonsoir

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

[chok371]

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 :

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

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

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

Merci

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

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

$("#slide-wrapper .block:eq(3n)").css('color', 'red');

[chok371]

Bonjour,

Désolé mais ça marche toujours pas, ce coups ci il me sélectionne rien.

[marcha]

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.