Déplacer des éléments différents d'une liste

**altair8080** · 01/06/2014, 08h54

Bonjour,

J'ai une liste

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<ul id="contenu">
    <li class="msgOK" id="t91" style="display: none;">
          <div class="general pull-left margin-top-12">
            <span class="author">5XXXX</span>
            <span class="textMsg">voici</span>
            <span class="time" data-time="2014-05-31 23:10:41">il y a 10 heures</span>
            <div style="clear: both;"></div>
        </div>
    </li>
   <li class="divers" id="a10" style="display: none;">
        <div class="general pull-left margin-top-12">
            message particulier
        </div>
    </li>
    <li class="msgOK" id="t90" style="display: none;">
        <div class="general pull-left margin-top-12">
            <span class="author">5XXXX</span>
            <span class="textMsg">voici</span>
            <span class="time" data-time="2014-05-31 23:09:48">il y a 10 heures</span>
            <div style="clear: both;"></div>
        </div>
    </li>
  <li class="divers" id="a9" style="">
        <div class="general pull-left margin-top-12">
            message particulier
        </div>
    </li>
    <li class="msgOK" id="t89" style="">
        <div class="general pull-left margin-top-12">
            <span class="author">5XXXX</span>
            <span class="textMsg">voici</span>
            <span class="time" data-time="2014-05-31 23:09:03">il y a 10 heures</span>
            <div style="clear: both;"></div>
        </div>
    </li>
    <li class="msgOK" id="t88" style="">
        <div class="general pull-left margin-top-12">
            <span class="author">5XXXX</span>
            <span class="textMsg">voici</span>
            <span class="time" data-time="2014-05-31 23:08:01">il y a 10 heures</span>
            <div style="clear: both;"></div>
        </div>
    </li>
</ul>

le conteneur UL : id = conteneur
ensuite pour les lignes LI
- il y a deux types :
1 / class="msgOK" id="t" + identifiant chrono
2 / class="divers" id="a" + identifiant chrono

en plus chacun des li peut avoir un style qui permet d'afficher ou masquer la ligne

L'objectif :
Quand une ligne de class msgOk apparaît/disparait, je dois déplacer et faire apparaitre/disparaitre le bloc class divers.

L'objectif est tous les X messages de class msgok, faire apparaitre un bloc divers.
mais les blocs msgok peuvent apparaitre / disparaitre dans un ordre aléatoire, il faut donc repositionner les bloc divers.

Merci

**altair8080** · 01/06/2014, 15h33

voici le code actuel qui ne fonctionne pas parfaitement.

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
34
35
36
<html>
<head></head>
<body>
</body>
<ul id="maliste">
<li class="msg" id="t10">10</li>
<li class="msg" id="t9" style="display: none;">9</li>
<li class="msg" id="t8">8</li>
<li class="msg" id="t7">7</li>
<li class="msg" id="t6">6</li>
<li class="msg" id="t5">5</li>
<li class="msg" id="t4" style="display: none;">4</li>
<li class="msg" id="t3">3</li>
<li class="msg" id="t2">2</li>
<li class="msg" id="t1">1</li>
<li class="mad" id="ma4" style="">canvasd4</li>
<li class="mad" id="ma3" style="">canvasd3</li>
<li class="mad" id="ma2" style="">canvasd2</li>
<li class="mad" id="ma1" style="">canvasd1</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" >
  var mad = 3;
  var k = 0;
  $("#maliste").children("li.msg:visible").each(function (i, item){
  var j = i % 2;
  if(i > 0 && j ==0 && mad >= 0) {
       z = i+k;
       $("#maliste li.mad:eq("+mad+")").insertAfter($("#maliste li:eq("+z+")"));
       k = k + 1;
  }
 
})
 
</script>
</html>

au départ l'affichage est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
10
8
7
6
5
3
2
1
canvasd4
canvasd3
canvasd2
canvasd1

Après chargement le résultat est

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
10
canvasd1
8
7
canvasd2
6
5
canvasd3
3
2
1
canvasd4

Si on enlève le code style display none

le résultat est correct :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
10
9
canvasd1
8
7
canvasd2
6
5
canvasd3
4
3
canvasd4
2
1

donc cela concerne un problème de comptabilisation avec visible / hidden

merci

Déplacer des éléments différents d'une liste

jQuery

Discussions similaires

Partager

Partager