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

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

voici le code actuel qui ne fonctionne pas parfaitement.

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

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:

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:

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