Discussion :

[Flynt]

Salut !

Mon objectif est de créer une liste d'éléments avec cette condition : si la liste a plus de 20 éléments on cache les 21 à n éléments qu'on peut afficher en cliquant sur + puis les recacher.

Jusque là pas de soucis, c'est ce genre de truc que je veux obtenir :
http://www.webdesignerwall.com/demo/...ide-panel.html

Seulement le code de ma liste ne contient pas de div par défaut et je veux insérer un élément div à la volée si ma liste contient plus de 20 éléments.

Mon problème est que je n'arrive pas à insérer l'ouverture du div au début de ma liste et la fermeture à la fin.

Voici mon code (c'est au moment de l'insertion des divs que j'ai un soucis) :

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
 
$(document).ready(function(){
var i = 0; // Nombre de d'éléments total
var n = 0; // Nombre de ul
 
 $("ul").each(function(){
 	n= 0;
	i=i +1;
	//alert(i);
 
		$(this).find("li").each(function(){
			n=n +1;
 
 
			if (n>=20) { // Si on a une liste >= de 20 éléments
 
				if (n == 20) // Pour le premier élément on lui attribut un div
				{
					$(this).after('<div class="wrap-hidden">');
					$(this).("li:last").("</div>");				
				}
 
 
					$(this).nextAll("li").addClass("hidden");
					$(this).nextAll().hide();
					return false;// On cache les éléments de 21 à n
					/* On ajoute le bouton plus que l'on ne cache pas */
					//alert("arg");
 
			}
 
		});
 
	});
	alert("Nombre de d'éléments total : "+n);
	alert("Nombre de ul : "+i);
 
 
	$(".btn-slide").click(function(){
		$(".hidden").slideToggle("slow");		
		return false;
	});
 
}); // fin

Le 1er <div> est bien inséré mais le code génère aussi la balise de fermeture (que je ne veux obtenir à la fin de ma liste) juste après le <div> d'ouverture ...

Une idée ?

[danielhagnoul]

Bonjour.

On ne peut pas insérer un élément « div » dans un élément « ul ».

Vous pouvez jouer sur addClass() et removeClass() pour cacher ou montrer tous les « li » excédentaires.

[Sourrisseau]

pour te compliquer la vie !!!! Il y a une technique beaucoup plus simple en utilisant ce que t'offre jquery. Voici la méthode pour masquer les éléments au delà du 20eme

Code :

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

1
2
3
4
5
 
 
<style>  .none { display : none} </style>
 
$("li:gt(19)").addClass("none");

Cette méthode est un peu trop générique. Je te conseille de mettre une classe commune a tes li sur lesquelles tu veux faire cette opération, par exemple 'mes_li' cela donne. ( n'oublie pas de mettre ce code dans $(document).ready .... )

Code :

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

1
2
3
 
 
$(".mes_li:gt(19)").addClass("none");

Pour ton bouton pas de soucis ( tu vois pour les effets ...)

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$(".btn-slide").click(function(){
		if ($(".mes_li .none").size() > 0) {
                    $(".mes_li").removeClass("none");
                } else {
                    $(".mes_li:gt(19)").addClass("none");
                }
 
		return false;
	});

[Flynt]

@danielhagnoul : Pourquoi ? Ce n'est pas une bonne pratique ?

Je viens de parvenir à réaliser ce que je désire avec la fonction
wrapAll() de jquery qui entoure de html un élément donné.

@Sourrisseau : Je ne connaissais pas la fonction gt(), et ton code est peut-être mieux que la fonction hide() (en gros utiliser display:none plutôt que hide() ).

Du coup mon code fonctionnel pour l'instant :

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
55
 
$(document).ready(function(){
var i = 0; // Nombre de ul
var n = 0; // Nombre de d'éléments total
var x = 0; // nombre de liste(s) supérieure(s) à 20 et identifiant de ces listes
 
 $("ul").each(function(){
 	n= 0;
	i=i +1;
	//alert(i);
 
		$(this).find("li").each(function(){
			n=n +1;			
 
			if (n>=20) { // Si on a une liste de >= de 20 éléments 
 
				x = x+1;
				$(this).nextAll("li").addClass("hidden"+x+" ");
 
					//$(this).after('<div class="wrap-hidden">');
					//$(this).("li:last").("</div>");	
 
					$(".hidden"+x+" ").wrapAll("<div id='wrap-hidden"+x+"'></div>"); // On ajoute un div autour 
					// des éléments à cacher
 
 
 
 
					$("#wrap-hidden"+x+" ").hide();
					//$(this).after('<h3 id="btn-slide'+x+'"><a href"#">SLIDE'+x+'</a></h3>');
					$("#wrap-hidden"+x+" ").after('<h3 id="btn-slide'+x+'"><a href"#">SLIDE'+x+'</a></h3>');
					return false;
					// On cache les éléments de 21 à n
					/* On ajoute le bouton plus que l'on ne cache pas */
			}
 
		});
 
	});
	alert("Nombre de d'éléments total : "+n);
	alert("Nombre de ul : "+i);
	alert("Nombre de liste supérieure à 20 : "+x);
 
 
	$("#btn-slide1").click(function(){
		$("#wrap-hidden1").slideToggle();		
		return false;
	});
 
	$("#btn-slide2").click(function(){
		$("#wrap-hidden2").slideToggle();		
		return false;
	});
 
}); // fin

La variable x est là pour compter le nombre de liste supérieure à 20 (il y en a plusieurs).

Le seul petit défaut qui subsiste pour l'instant : Lorsque j'appelle la fonction slideToggle() quand ma liste doit être cachée, l'effet n'est pas très "fluide" (et encore cela marche correctement sur IE ... )

EDIT : En fait sous Firefox, le scroll du navigateur tente de suivre le texte qui se cache du coup ce n'est pas très esthétique...
EDIT2 : Apparemment, c'est un problème connu :
Demo : http://www.richardsimoes.com/test2.html
Source : http://old.nabble.com/slideToggle-fl...748s27240.html

Reste à trouver la solution , je tiens au jus.

[Sourrisseau]

même important de tacher d'avoir un code propre. Propre cela veut dire qu'il respecte le plus possible les règles. Pour le HTML tout est faisable mais pour autant tout n'est pas souhaitable.

Pour ce qui est du javascript ( et pour le html aussi ) si quelqu'un travail avec toi ou après toi il va se demandé ce que tu as fait. De plus si tu ne cherches pas à prendre de bonnes habitudes ( et ça en javascript cela ne pardonne pas) tu vas voir arriver des bugs totalement imprévus. Et là , tu peux me croire , tu vas lire 5 fois le livre : 'Je me met aux bonnes pratiques'

[Flynt]

Ok merci pour la réponse.

A vrai dire, c'est un projet totalement perso donc je suis et je serai surement le seul amené à plonger dans le code.

Pour le coup, je suis bien conscient que mon code n'est pas très standard mais je ne vois pas trop comment je pourrais faire autrement ... Je vais donc pour l'instant me contenter de ce code fonctionnel en attendant de trouver la solution en standard...