Faire des paquets de DIV à partir d'une série

**monlio** · 24/07/2012, 16h30

Bonjour à tous
Voilà mon problème je souhaite transformer
cette série de div

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="toto">
   <div class="titi"> SOME HTML.... </div>
   <div class="titi"> SOME HTML.... </div>
   <div class="titi"> SOME HTML.... </div>
   <div class="titi"> SOME HTML.... </div>
   <div class="titi"> SOME HTML.... </div>
   <div class="titi"> SOME HTML.... </div>
   <div class="titi"> SOME HTML.... </div>
   <div class="titi"> SOME HTML.... </div>
   <div class="titi"> SOME HTML.... </div>
</div>

en série de blocs tutu composés de n div titi

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
<div class="toto">
   <div class="tutu">
       <div class="titi"> SOME HTML.... </div>
       <div class="titi"> SOME HTML.... </div>
       <div class="titi"> SOME HTML.... </div>
   </div>
   <div class="tutu">
       <div class="titi"> SOME HTML.... </div>
       <div class="titi"> SOME HTML.... </div>
       <div class="titi"> SOME HTML.... </div>
   </div>
   <div class="tutu">
       <div class="titi"> SOME HTML.... </div>
       <div class="titi"> SOME HTML.... </div>
       <div class="titi"> SOME HTML.... </div>
   </div>
</div>

J'arrive à insérer des balises ou du texte tous les n div titi avec

Code :

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

$("div.toto > div.titi:nth-child(3n)").after("-----uuuuuu");

ou a entourer tous les niemes elements

Code :

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

$("div.toto > div.titi:nth-child(3n)").wrap("<div class='wrap'></div>");

mais je bloque pour arriver à ce que je veux.
Merci pour votre aide.
monlio

**SpaceFrog** · 24/07/2012, 17h14

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
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script type="text/javascript">
	$(function(){
	lg=$('.toto .titi').length
	for(i=0;i<lg;i=i+3){
	    $('.toto').append( $('<div/>').addClass('tutu').append( $('.toto > .titi:lt(3)') ))
 
	}
	})
 
</script>
<style type="text/css">
.tutu {background-color:lime;
border: solid 1px red;
margin: 2px;}
.titi {color:blue;}
</style>
</head>
<body>
<div class="toto">
   <div class="titi"> SOME HTML.... 1 </div>
   <div class="titi"> SOME HTML.... 2</div>
   <div class="titi"> SOME HTML.... 3</div>
   <div class="titi"> SOME HTML.... 4</div>
   <div class="titi"> SOME HTML.... 5</div>
   <div class="titi"> SOME HTML.... 6</div>
   <div class="titi"> SOME HTML.... 7</div>
   <div class="titi"> SOME HTML.... 8</div>
   <div class="titi"> SOME HTML.... 9</div>
</div></body>
</html>

tiens ça marche aussi ça :

Code :

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

1
2
3
4
5
6
7
	$(function(){
	lg=$('.toto .titi').each( function(){
	if( $(this).index('div') % 3 ==0) {
	    $('.toto').append( $('<div/>').addClass('tutu').append( $('.toto > .titi:lt(3)') ))
		}
	})
	})

ou encore

Code :

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

1
2
3
4
5
	$(function(){
	$('.toto .titi:nth-child(3n)').each( function(){
		    $('.toto').append( $('<div/>').addClass('tutu').append( $('.toto > .titi:lt(3)') ))
		})
	})

ou encore :

Code :

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

1
2
3
4
5
	$(function(){
	while($('.toto > .titi').length>0){
	    $('.toto').append( $('<div/>').addClass('tutu').append( $('.toto > .titi:lt(3)') ))
 	}
	})

**monlio** · 25/07/2012, 13h38

Bonjour
Merci beaucoup ça marche nickel, notamment les solution 1 et 4 qui prennent en compte les cas ou le nb de titi n'est pas multiple du n.
Cependant j'ai du mal a interpréter en "français" le fonctionnement:
a) le saut au paquet de n suivant (dans la boucle)
b) la phrase : $('.toto').append( $('<div/>').addClass('tutu').append( $('.toto > .titi:lt(3)') ))

Encore merci de votre aide
monlio

**SpaceFrog** · 25/07/2012, 14h11

en principe ils devraient tous fonctionner même pour des non multiples de 3

partons du transfert des éléments dans un div de classe tutu

Code :

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

1
2
3
4
5
 
 $('.toto') //div conteneur
 .append( $('<div/>')// dans lequel on ajoute à la fin un nouveau div
 .addClass('tutu') // on donne la class tutu au nouveau div
 .append( $('.toto > .titi:lt(3)') )) // et on y deplace tous les 3 premiers enfants direct de .toto qui ont la classe .tutu

pour ce qui est des boucles pour rendre l'opération récurrente

soit on part de tous les div de classe titi on verifie si leur index est un multiple de 3 ...

soit on en prend un sur 3

Code :

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

$('.toto .titi:nth-child(3n)')

c'est sans doute dans ce cas que le ou les deux derniers div ne sont pas transférés

soit on boucle tant que toto a des enfants directs titi

Code :

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

while($('.toto > .titi').length>0){

vu qu'ils sont ensuite transférés dans un sous div tutu leur nombre décroît au fur a mesure qu'ils sont déplacés par lot de 3
(sans doute la meilleur solution et la plus rapide )

**monlio** · 25/07/2012, 14h23

Merci beaucoup pour l'explication.
C'est vraiment génial, et c'est devenu très clair.
Formidable !!!!! Bravo encore pour l'aide.
A très bientôt
monlio

**monlio** · 25/07/2012, 15h37

Re bonjour
en continuant mon exploration j'ai trouvé une solution utilisant la fonction wrapall.
la boucle et la selection des n premier reste identique.
voici le code

Code :

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

1
2
  while($('.toto > .titi').length>0){
  $('.toto > .titi:lt(3)').wrapAll("<div class='tutu'></div>");}

Merci encore
monlio

Faire des paquets de DIV à partir d'une série

jQuery

Vue hybride

Discussions similaires

Partager

Partager