Encadrer plusieurs DIV de DIV

**Kahndryl** · 05/02/2013, 20h19

J'y suis presque! J'ai néanmoins deux soucis...

unwrap s'applique à tous les éléments or si l'élément n'a plus la class slide comme parent, il supprime celle au-dessus. Je me suis dit que je pouvais vérifier si l'élément était visible ou non, mais dans un slideshow tous les éléments ne sont pas visibles et donc le unwrap ne s'appliquait pas à tous... :S

Peut-on dire à unwrap de supprimer uniquement la class slide?

Mon second problème concerne surement le timing. Voici la fonction finale que j'applique :

Code javascript :

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
 
$(document).ready(function (){
   $('.categ').click(function(){               
       /* Affiche ou cache un élément */
       var id = this.id;
       var el = '.el-' + id;                
       if($(el).is(':hidden')){
           $(el).delay(800).fadeIn();
       }else{
           $(el).fadeOut();
       }
 
   /* Une fois l'élément caché ou affiché, je fais un unwrap */                
   $("[id^='personne']").unwrap();
 
   /* Ensuite je refais le wrap (qui a été fait une première fois au chargement    de la page) */
   var divIdx=0
    $("[id^='personne']:visible").each(function(){ 
        if($(this).index("[id^='personne']:visible")%3==0){
           $(this).wrap($('<div/>').attr({"id":"slide"+(++divIdx),"class":"slide"}));
        }
        else {
            $('#slide'+divIdx).append($(this)) 
        }
    });
 
/* Je réinitialise ma fonction slideshow */
   carrousel.init($("#staff"));
   });
});

Et avec cette méthode il n'applique pas le unwrap, est-ce bien une question de timing?

**SpaceFrog** · 06/02/2013, 08h45

si c'est a prtir d'un click d'eun element wrappé fais le de façon relative avec

Code :

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

$(this).parent("[id^='personne']").unwrap()

**Kahndryl** · 06/02/2013, 09h52

J'ai donc modifié :

Code javascript :

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

$("[id^='personne']").unwrap();

Par ceci :

Code javascript :

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

$(this).parent$("[id^='personne']").unwrap()

Mais j'ai une erreur

"Uncaught TypeError: Object [object Object] has no method 'parent$'"

Excuse mon niveau médiocre en javasript/jquery... J'ai commandé le bouquin jQuery - tête la première mais la demande actuelle est assez urgente, donc je m'en remets à la communauté.

D'ailleurs, encore merci pour ton aide...

**SpaceFrog** · 06/02/2013, 09h55

oui tu as recopié mes âneries ...
j'ai modifié le code au dessus

**Kahndryl** · 06/02/2013, 10h10

J'ai l'impression que l'unwrap ne se fait pas..

Mes éléments passent de :

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>

à

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
15
16
<div id="slide1" class="slide">
   <div id="slide1" class="slide">
       <span id="personne1" class="el-cat-1" style="display:none;"></span>
   </div>
<span id="personne2" class="el-cat-1" style="display:none;"></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>

Tu y comprends quelque chose? C'est comme si le unwrap ne faisait pas...

Mais sinon avec les boutons wrap et unwrap cela fonctionne parfaitement...

**SpaceFrog** · 06/02/2013, 10h26

tu peux pas me le faire en jsfiddle, ce serait plus simple à tester et modifier...

**Kahndryl** · 06/02/2013, 11h23

Si bien sûr, voici :

http://jsfiddle.net/Kahndryl/WLPXZ/

Il faut juste cliquer sur Categorie 1 ou 2 etc.

**SpaceFrog** · 06/02/2013, 11h46

et quel est le comportement attendu ?

**Kahndryl** · 06/02/2013, 12h05

Quand tu inspectes le résultat une fois cliqué sur la catégorie 1 (par exemple) tu obtiens :

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
15
16
17
18
19
20
21
22
<div id="staff">
<div id="slide1" class=slide">
    <div id="slide1" class=slide">
        <span id="personne1" class="el-cat-1">Personne1</span>
    </div>
    <span id="personne2" class="el-cat-1">Personne2</span>
    <span id="personne3" class="el-cat-2">Personne3</span>
</div>
<div id="slide2" class=slide">
    <div id="slide2" class=slide">
        <span id="personne4" class="el-cat-2">Personne4</span>
    </div>
    <span id="personne5" class="el-cat-2">Personne5</span>
    <span id="personne6" class="el-cat-3">Personne6</span>
</div>
<div id="slide3" class=slide">
    <div id="slide3" class=slide">
         <span id="personne7" class="el-cat-3">Personne7</span>
    </div>
    <span id="personne8" class="el-cat-4">Personne8</span>
</div>
</div>

Or il faudrait avoir :

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
15
 
<div id="staff">
<span id="personne1" class="el-cat-1" style="display:none"></span>
<span id="personne2" class="el-cat-1" style="display:none"></span>
<div id="slide1" class="slide">
<span id="personne3" class="el-cat-2"></span>
<span id="personne4" class="el-cat-2"></span>
<span id="personne5" class="el-cat-2"></span>
</div>
<div id="slide2" class="slide">
<span id="personne6" class="el-cat-2"></span>
<span id="personne7" class="el-cat-3"></span>
<span id="personne8" class="el-cat-4"></span>
</div>
</div>

**SpaceFrog** · 06/02/2013, 12h53

rien compris ^^

**Kahndryl** · 06/02/2013, 13h12

Maarf

je vais essayer de me faire mieux comprendre ^^

Je reprends. A la base j'ai ceci :

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
<span id="cat-1" class="categ" >Categorie 1</span>
<span id="cat-2" class="categ" >Categorie 2</span>
<span id="cat-3" class="categ" >Categorie 3</span>
<span id="cat-4" class="categ" >Categorie 4</span>
<div id="staff">
    <span id="personne1" class="el-cat-1">Personne1</span>
    <span id="personne2" class="el-cat-1">Personne2</span>
    <span id="personne3" class="el-cat-2">Personne3</span>
    <span id="personne4" class="el-cat-2">Personne4</span>
    <span id="personne5" class="el-cat-2">Personne5</span>
    <span id="personne6" class="el-cat-3">Personne6</span>
    <span id="personne7" class="el-cat-3">Personne7</span>
    <span id="personne8" class="el-cat-4">Personne8</span>
</div>

Grâce à ton code :

Code javascript :

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

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

J'obtiens ceci de façon automatique:

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-3"></span>
</div>
<div id="slide3" class="slide">
<span id="personne7" class="el-cat-3"></span>
<span id="personne8" class="el-cat-4"></span>
</div>

J'aimerais que lorsque l'on clique sur Categorie1 (par exemple), les deux span :

Code html :

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

1
2
<span id="personne1" class="el-cat-1"></span>
<span id="personne2" class="el-cat-1"></span>

disparaissent et qu'ensuite on supprime les div slide1,2 et 3 (placées grâce à ton code) afin qu'elles soient replacées sans prendre en compte les deux span cachées lorsque l'on a cliqué sur Categorie1.

Pour ce faire j'utilise ce code :

Code javascript :

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
$('.categ').click(function(){       
/* Pour afficher ou cacher mes catégories de personne */         
    var id = this.id;
        var el = '.el-' + id;                
        if($(el).is(':hidden')){
            $(el).delay().fadeIn();
        }else{
            $(el).fadeOut();
        }
/* Supprime les div slide1, 2, 3 mais ça n'a pas l'air de fonctionner */
    $(this).parent("[id^='personne']").unwrap();
 
/* Replace les div slide1,2,3 sans prendre en compte les éléments cachés */   
    var divIdx=0
    $("[id^='personne']:visible").each(function(){
        if($(this).index("[id^='personne']:visible")%3==0){
            $(this).wrap($('<div/>').attr({"id":"slide"+(++divIdx),"class":"slide"}));
        }
        else {
            $('#slide'+divIdx).append($(this))
        }
    });
    //carrousel.init($("#staff"));
});

Ce code cache bien mes personnes qui appartiennent à la catégorie 1, mais j'ai l'impression que le unwrap ne fonctionne pas car le résultat est le suivant :

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
15
16
17
18
19
20
21
22
<div id="staff">
<div id="slide1" class=slide">
    <div id="slide1" class=slide">
        <span id="personne1" class="el-cat-1">Personne1</span>
    </div>
    <span id="personne2" class="el-cat-1">Personne2</span>
    <span id="personne3" class="el-cat-2">Personne3</span>
</div>
<div id="slide2" class=slide">
    <div id="slide2" class=slide">
        <span id="personne4" class="el-cat-2">Personne4</span>
    </div>
    <span id="personne5" class="el-cat-2">Personne5</span>
    <span id="personne6" class="el-cat-3">Personne6</span>
</div>
<div id="slide3" class=slide">
    <div id="slide3" class=slide">
         <span id="personne7" class="el-cat-3">Personne7</span>
    </div>
    <span id="personne8" class="el-cat-4">Personne8</span>
</div>
</div

>

Tu peux vérifier en faisant un clique droit -> inspecter (sous chrome ou firebug sous firefox) dans la case result du jsfiddle.

Est-ce assez clair?

**SpaceFrog** · 06/02/2013, 13h45

Heu ...

**Kahndryl** · 06/02/2013, 13h52

Quelle partie tu ne comprends pas?

Tu peux toujours voir ce que ça donne ici :

http://jsfiddle.net/Kahndryl/WLPXZ/

**SpaceFrog** · 06/02/2013, 13h55

Non c'est juste que là j'ai mal au crane, la gerbe...
Sans doute un debut de grippe j'arrive pas à me concenter

**Kahndryl** · 06/02/2013, 14h07

Ah, repose toi bien alors, tu en as déjà beaucoup fait pour moi. Quelqu'un d'autre prendra bien la relève (j'espère

)

**Kahndryl** · 06/02/2013, 18h55

Bonsoir tout le monde,

Sur ce jsfiddle vous comprendrez mieux ce que je veux faire : http://jsfiddle.net/WLPXZ/2/

En simple, j'aimerais que les actions appliquées lorsqu'on clique sur les boutons "unwrap" et "wrap" se fassent automatiquement en cliquant sur un des boutons des catégories.

Dans l'ordre suivant :
1. On clique sur un des boutons catégories
2. Les éléments de la catégorie concernée disparaissent
3. On applique la fonction unwrap
4. On applique la fonction wrap

La tout sans devoir appuyer sur les boutons "unwrap" et "wrap"

Je suis sûr que c'est simple, mais mon manque de compétence m'empêche d'y parvenir

D'avance merci...

**Kahndryl** · 10/02/2013, 00h33

Petit up.

Personne n'a de solution pour mon problème? (Voire post juste au-dessus)

D'avance merci à celui qui m'accordera un peu de temps

Encadrer plusieurs DIV de DIV

jQuery

Discussions similaires

Partager

Partager