[Réglé] Cherche une méthode de sélection jQuery

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 :

<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.
Modifié par Chok71 (09 Oct 2010 - 17:51)

<script type="text/javascript" >
$(function() { 
$("#nom div:nth-child(3n)").css('color', 'red');
});
</script>

et

<div id="nom"> 

(sans #)
Modifié par paolo (30 Sep 2010 - 21:47)

Salut,

Merci mais ça ne marche pas, voici ce que ça me donne : http://c.imagehost.org/0509/Presse-papiers-1.jpg

Le code XHTML :

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

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

Modifié par Chok71 (05 Oct 2010 - 17:01)

Il te suffit juste de faire :

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

Jquery compte le h3 dans les 3n. Le script recherche tous les div tous les 3 éléments dans slide-wrapper. Mais comme h3 est un élément de slide-wrapper il applique le css: color au second div qui est le 3eme élément. 3n+1 permet de commencer au 4eme élément : le bon div.

Bonjour,

Désolé mais ça marche toujours pas, car il me sélectionne tous les blocks.

Avec ton code HTML, ça fonctionne. Tu as ta page complète ou un lien ?

Salut,

peut-être que cette selection serait plus sûre pour ce que tu as à faire :

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

Il me semble qu'il faut un plugin (more selector) pour utiliser nth-of-type.

La page est accessible ici : http://rapidshare.com/files/423942169/index.html

Salut,
j'ai écrit ce petit bout de code qui fonctionne sur ton exemple:

	<script type="text/javascript">
	$(document).ready(function(){
		$.each($("#slide-wrapper .block"), function(i, field){ // Liste tous les .block de #slide-wrapper
			y = (i+1)%3; // calcule si multiple de 3
			if(y==0){ $(this).css("background","red"); } // si multiple, applique ta modif sur le div
		});
	});
	</script>

Je suis désolé, mais ça marche toujours pas Il y a peut-être un conflit quelque part ?

Voici la page complète en ligne : http://www.chokri-rafik.com/realisations/NatureTour/
Modifié par Chok71 (09 Oct 2010 - 10:28)

Salut,
dans ton fichier dev-perso.js, remplace:

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

par

        $.each($(".blocks-container > li"), function(i, n){ // Liste tous les li du ul .blocks-container
            y = (i+1)%3; // calcule si multiple de 3 
            if(y==0){ $(this).css("background","red"); } // si multiple, applique ta modif sur li 
        });

J'ai enregistré ta page en local et testé avec cette modif: les div de droites apparaissent en rouges.

screeshot:


ou pour faire plus court:

$.each($(".blocks-container li"), function(i, n){if((i+1)%3==0){ $(this).css("background","red"); }});

EDIT
Marche aussi avec le code

$(".blocks-container > li:nth-of-type(3n)").css('background', 'red');

Modifié par davidito (09 Oct 2010 - 16:31)

Merci beaucoup, c'est exactement ce que je voulais.