Besoin d'aide avec la fonction height() et autre

**petit-scarabee** · 30/08/2012, 17h48

Bonjour,

Je dois écrire un script qui mesure et additionne la hauteur de chaque item (<li>) d'une liste (<ul>) et qui, dès que la somme atteint 200px, place les items suivants dans une nouvelle liste qui viendra se placer à côté de la première... (et de même pour toutes les listes de la même classe, disons par exemple ".liste")

J'ai essayé ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready(function() {
       $('.list').each(function() {
       h=0;
              $(this).find('li').each(function() {
              h = h + $(this).height();
                     if ( h >= 200 ){
                     $(this).nextAll().insertAfter($(this).parent('.list')).wrapAll('<ul class="list second_column"></ul>');
                     $(this).parent('.list').css("height", "200px");
                     h=0;
                     }
              })
       })
});

Ça ne fonctionne pas, "$(this).height()" retourne 0 comme valeur...

Je suis débutante

Si quelqu'un peut m'aider...

Merci d'avance.

**SpaceFrog** · 31/08/2012, 10h12

Je pensais pouvoir passer par un :visible ... mais à priori ça ne passe pas sur un overflow hidden ???
Y'a pas un truc en js ou jquery pour ça ?
j'ai contourné avec un calcul "savant"

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
ul {border:solid 1px grey;
width: 200px;
float:left;
margin:0;
list-style-position: inside;
 
}
</style>
 
 
<script src="http://code.jquery.com/jquery-latest.min.js"  type="text/javascript"></script>
 
<script type="text/javascript">
$(function(){
//Population du ul pour l'exemple 
var i=-1;
while(++i<101){
$('#foo').append($('<li>').html(i+'....'))
}
//definition de la hauteur du ul à 200px 
$('#foo').css({"overflow":"hidden","height":"200px"})
 
//calcul du nombre de lis visibles  => maxlis
tabhidden=new Array();
$('#foo li').each(function(){
	if ( ($(this).offset().top + $(this).height()) >200){
		tabhidden.push($(this))
	}
	})
maxlis=$('#foo li').length - tabhidden.length;
 
//deplacement des lis invisibles pas lots de maxlis dans de nouveaux ul
while( $('#foo li').length > maxlis+1){
$('body').append($('<ul/>',{"height":"200px"}).append( $('#foo li:gt('+(maxlis)+'):lt('+(maxlis+1)+')') ) )
}
 
})
</script>
<title>Nouvelle page 1</title>
 
</head>
 
<body>
<ul id="foo">
</ul>
 
</body>
 
</html>

**SpaceFrog** · 31/08/2012, 12h02

version avec hauteur paramètrable du ul

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
ul {border:solid 1px grey;
width: 200px;
float:left;
margin:0;
list-style-type:lower-alpha;
}
li {margin-left:50px}
</style>
 
 
<script src="http://code.jquery.com/jquery-latest.min.js"  type="text/javascript"></script>
 
<script type="text/javascript">
$(function(){
//Population du ul pour l'exemple 
var lih=250 //heuteru souhaitée du ul
var i=0;
while(++i<116){
$('#foo').append($('<li>').html(i+'....'))
}
//definition de la hauteur du ul à 200px 
$('#foo').css({"overflow":"hidden","height":lih+"px"})
 
//calcul du nombre de lis visibles  => maxlis
tabhidden=new Array();
$('#foo li').each(function(){
	if ( ($(this).offset().top + $(this).height()) >lih){
		tabhidden.push($(this))
	}
	})
maxlis=$('#foo li').length - tabhidden.length;
 
//deplacement des lis invisibles pas lots de maxlis dans de nouveaux ul
while( $('#foo li').length > maxlis+1){
$('body').append($('<ul/>',{"height":lih+"px"}).append( $('#foo li:gt('+(maxlis)+'):lt('+(maxlis+1)+')') ) )
}
 
})
</script>
<title>Nouvelle page 1</title>
 
</head>
 
<body>
<ul id="foo">
</ul>
 
</body>
 
</html>

**petit-scarabee** · 07/09/2012, 20h09

Merci SpaceFrog!!!

En plus de bien me dépanner ton script m'a permis de voir que mon problème avec la fonction height() venait de l'ordre de mes scripts (pfffff!!) et du coup de faire fonctionner le mien!

Besoin d'aide avec la fonction height() et autre

jQuery

Vue hybride

Discussions similaires

Partager

Partager