Encadrer plusieurs DIV de DIV

**Kahndryl** · 04/02/2013, 11h14

Bonjour tout le monde,

Je suis actuellement en train de travailler sur un projet web et je suis bloqué. Mon problème est le suivant, je dois créer un slideshow avec un nombre d'éléments variable.

En gros, mon slideshow, créé avec jquery, fonctionne avec les div suivantes :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="slide1" class="slide">
    <div id="element1"></div>
    <div id="element2"></div>
    <div id="element3"></div>
</div>
<div id="slide2" class="slide">
    <div id="element4"></div>
    <div id="element5"></div>
    <div id="element6"></div>
</div>

(c'est donc un slideshow avec plusieurs éléments affichés en une fois)

Les différents éléments (element1, 2 etc.) peuvent être présent ou pas (display:none). Mon problème est le suivant, j'aimerais encadrer mes div elementx automatiquement suivant s'ils sont affichés ou non. Donc concrètement, il faudrait que le code javascript compte 3 éléments :visible puis qu'il encadre le contenu de <div id="slidex" class="slide"></div>
J'ai pensé à

Code :

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

$("#elementx").wrap("<div id='slidex' class='slide'></div>");

mais comment lui dire d'encadrer plusieurs éléments?

D'avance merci,

Kahndryl

**SpaceFrog** · 04/02/2013, 11h38

Tous dans le même div ?

Wrap le premier et appende les autres ...
http://jsfiddle.net/G8pET/

**Kahndryl** · 04/02/2013, 11h50

Déjà merci pour vos réponses.
Je me suis peut-être mal exprimé, en fait

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="slide1" class="slide">
    <div id="element1"></div>
    <div id="element2"></div>
    <div id="element3"></div>
</div>
<div id="slide2" class="slide">
    <div id="element4"></div>
    <div id="element5"></div>
    <div id="element6"></div>
</div>

Est le résultat que je veux obtenir, à la base je n'ai que

Code html :

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

1
2
3
4
5
6
    <div id="element1"></div>
    <div id="element2"></div>
    <div id="element3"></div>
    <div id="element4"></div>
    <div id="element5"></div>
    <div id="element6"></div>

Et je voudrais encadrer de div tous les 3 éléments qui sont visibles. (Il se peut par exemple que le element3 soit caché, donc j'aurai :

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="slide1" class="slide">
    <div id="element1"></div>
    <div id="element2"></div>
    <div id="element4"></div>
</div>
<div id="slide2" class="slide">
    <div id="element5"></div>
    <div id="element6"></div>
</div>

**MaitreKaio** · 04/02/2013, 11h52

Tu peux utiliser wrapAll()

**MaitreKaio** · 04/02/2013, 11h54

Zut j'ai posté en même temps que ta précision. Si je comprends bien, tu as n divs dans ton document, et tous les 3 divs tu veux créer un nouveau slide, sachant que certains divs sont cachés avec un 'display:none' ?

**Kahndryl** · 04/02/2013, 11h56

Voilà c'est exactement ce que tu viens de dire...

Merci pour ton temps

**SpaceFrog** · 04/02/2013, 12h47

http://jsfiddle.net/G8pET/2/

**Kahndryl** · 04/02/2013, 12h59

C'est beau

N'étant pas très familiarisé avec javascript et même jquery, pouvez-vous me dire à quel endroit je dois tester si element est visible?

**SpaceFrog** · 04/02/2013, 13h03

j'allais m'embarquer dans un test complexe ...
il suffit en fait de ne selectionner que les visibles ...
le temps de code ça et je reviens avec un exemple

Ce fut en effet beaucoup moins long que prévu ...

http://jsfiddle.net/G8pET/3/

**Kahndryl** · 04/02/2013, 13h17

Il me semble que ton lien ne fonctionne pas/plus

**SpaceFrog** · 04/02/2013, 13h32

sisi ...

le sous-titrage pour les mal-accédant au fiddle :

Code :

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

1
2
3
4
5
6
7
8
9
var divIdx=0
$("[id^='element']:visible").each(function(){ 
    if($(this).index("[id^='element']:visible")%3==0){
    $(this).wrap($('<div/>').attr({"id":"slide"+(++divIdx),"class":"slide"}).css('border',"solid 2px red"));
}
else {
    $('#slide'+divIdx).append($(this)) 
}
                                 })

**Kahndryl** · 04/02/2013, 14h01

Excellent! Je testerai cela ce soir et je viendrai mettre le sujet en résolu si ce code fonctionne

Merci!

**SpaceFrog** · 04/02/2013, 14h18

si ce code fonctionne

c'est beau l'insouciance de la jeunesse ...

tu en doutes ?

**Kahndryl** · 04/02/2013, 14h34

Je ne voulais pas t’offenser et je me suis mal exprimé...
J'entendais :
"...si ce code fonctionne avec mon code déjà établi."

**SpaceFrog** · 04/02/2013, 14h58

jsfiddle est de nouveau accessible on dirait ...

**Kahndryl** · 04/02/2013, 15h10

En effet, je suis en train de tester c'est exactement ce que je voulais!! J'avais cherché tout le week-end. Je me réjouis de tester sur mon application

**Kahndryl** · 04/02/2013, 20h04

Ton code fonctionne à merveille mais j'ai du mal à l'intégrer... En fait, ce que j'aimerais c'est un slideshow sur 3 éléments de ce type:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="slide1" class="slide">
<span id="personne1" class="el-cat-1"></span>
<span id="personne2" class="el-cat-1"></span>
<span id="personne3" class="el-cat-2"></span>
</div>
<div id="slide2" class="slide">
<span id="personne4" class="el-cat-2"></span>
<span id="personne5" class="el-cat-2"></span>
<span id="personne6" class="el-cat-2"></span>
</div>
<div id="slide3" class="slide">
<span id="personne7" class="el-cat-3"></span>
<span id="personne8" class="el-cat-4"></span>
</div>

Les div ont été correctement placées grâce à ton aide mais j'ai un souci pour la suite.
J'ai mis en place la possibilité d'afficher une seule catégorie (el-cat-2 par exemple) avec ce code :

Code javascript :

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

1
2
3
4
5
6
7
8
9
 $('.categ').click(function(){
var id = this.id;
var el = '.el-' + id;                
if($(el).is(':hidden')){
$('[id^='personne']').fadeOut();
$(el).delay(800).fadeIn();
}else{
$(el).fadeOut();
}

.categ étant des éléments de ce style :

Code html :

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

1
2
3
4
<span id="cat-1'' class="categ">..</span>
<span id="cat-2'' class="categ">..</span>
<span id="cat-3'' class="categ">..</span>
<span id="cat-4'' class="categ">..</span>

J'aimerais qu'une fois une catégorie cliquée, le slideshow se refait de façon dynamique avec les éléments qui sont visibles.
J'ai tenté d'ajouter ton code juste après le fonction click (ci-dessus) en appliquant un $("[id^='personne']").unwrap(); pour enlever les div créées précédemment mais cela ne donne pas le résultat que je souhaite .... :S

Suis-je dans la bonne direction? Si oui comment puis-je faire pour que ce code fonctionne? Et si non, existe-t-il une méthode plus simple pour faire ce que je le souhaite?

D'avance merci pour votre temps et votre aide...