Encadrer plusieurs DIV de DIV

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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?

06/02/2013, 08h45
SpaceFrog

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

Code:

$(this).parent("[id^='personne']").unwrap()
06/02/2013, 09h52
Kahndryl

J'ai donc modifié :

Code:

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

Par ceci :

Code:

$(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...
06/02/2013, 09h55
SpaceFrog

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

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

Mes éléments passent de :

Code:

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:

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

06/02/2013, 10h26
SpaceFrog

tu peux pas me le faire en jsfiddle, ce serait plus simple à tester et modifier...
06/02/2013, 11h23
Kahndryl

Si bien sûr, voici :

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

Il faut juste cliquer sur Categorie 1 ou 2 etc.
06/02/2013, 11h46
SpaceFrog

et quel est le comportement attendu ?

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

Code:

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:

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>

06/02/2013, 12h53
SpaceFrog

rien compris ^^ :mrgreen:

Maarf :mrgreen: je vais essayer de me faire mieux comprendre ^^

Je reprends. A la base j'ai ceci :

Code:

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:

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:

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:

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:

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:

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

06/02/2013, 13h45
SpaceFrog

Heu ...
06/02/2013, 13h52
Kahndryl

Quelle partie tu ne comprends pas?

Tu peux toujours voir ce que ça donne ici :

http://jsfiddle.net/Kahndryl/WLPXZ/
06/02/2013, 13h55
SpaceFrog

Non c'est juste que là j'ai mal au crane, la gerbe...
Sans doute un debut de grippe j'arrive pas à me concenter :(
06/02/2013, 14h07
Kahndryl

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 :))
06/02/2013, 18h55
Kahndryl

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

D'avance merci...
10/02/2013, 00h33
Kahndryl

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

Voir 40 message(s) de cette discussion en une page