Compter les occurences d'un tag en JS

Résolu
Judes-Emile Bornes IV Messages postés 123 Date d'inscription   Statut Membre Dernière intervention   -  
Judes-Emile Bornes IV Messages postés 123 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
J'essaye de compter le nombre de li d'une liste de menu qui sera agrandie par la proprio du site que je réalise, ceci dans le but de calculer la taille en hauteur du container de menu (ul). (en effet la fonction auto n'est pas applicable ici car la hauteur est modifiée en temps réelle par un jquery hoverintent (pour ce qui ne connaissent pas c'est un JS de menu déroulants dynamiques).
voici mon code il ne marche pas! HELP please 
<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("#menu1").hoverIntent(makeTall,makeShort);
			}); // close document.ready
		$SEARCHLI = document.li.ul.getElementsByTagName("li");
		for (i = 0; i <= $SEARCHLI.length; i++) {
 		$NUMBEROFLI = i;
		}
		$MENUHEIGHT = ($NUMBEROFLI*30);
		function makeTall(){ $("#menu li ul").animate({"height":$MENUHEIGHT},200);}
		function makeShort(){ $("#menu li ul").animate({"height":0},200);}
</script>
A voir également:

4 réponses

Réponse 1 / 4
Judes-Emile Bornes IV Messages postés 123 Date d'inscription   Statut Membre Dernière intervention   12
 
bon personne pour m'aider sur ce topic mais j'ai pu trouver la soluce pour ceux que ça intéresse voici le code complet:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Le journal d'Audrey Arbion</title>
<link href="media/Mandala_Audrey.ico" rel="shortcut icon" type="image/gif" />
<link href="AA.css" rel="stylesheet" type="text/css" />
<!-- script du menu -->
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("#menu1").hoverIntent(makeTall,makeShort);
		var LImenu = document.getElementById("menu1");
		var LIs = LImenu.getElementsByTagName("li");
		var LIsCOUNT = LIs.length;
		$MENUHEIGHT = (LIsCOUNT*30);
		function makeTall(){ $("#menu li ul").animate({"height":$MENUHEIGHT},100);}
		function makeShort(){ $("#menu li ul").animate({"height":0},100);}
		//li with fade class
   		$("li.fade").hover(function(){$(this).fadeOut(50);$(this).fadeIn(600);});

		}); // close document.ready
</script>
</head>

<body>
<div id="container">
<div id="banplusnav">
<ul id="menu">
	<li><a href="intro.html" target="subframe">Introduction</a></li>
    <li id="menu1"><a href="#">Le journal d'Audrey</a>
    <ul>
    <li class="fade"><a href="02-09-2005.html" target="subframe">02-09-2005</a></li>
<li class="fade"><a href="24-09-2005.html" target="subframe">24-09-2005</a></li><li class="fade"><a href="03-11-2005.html" target="subframe">03-11-2005</a></li></ul>
    </li>
    <li><a href="contact.html" target="subframe">Contact</a></li>
    <li id="spacerli">&nbsp;</li>
    <li><a href="administration-login.php" target="subframe">administration (acc&egrave;s r&eacute;serv&eacute;)</a></li>
</ul>
</div>
<div id="iframediv"><iframe scrolling="auto" frameborder="0" src="intro.html" width="870" height="100%" name="subframe" id="subframe"></iframe></div>
</div>
<div id="containerbas">
</div>
</body>
</html>


CSS: 
body {
	background-color: #FFF;
	margin: 0px;
}
#container {
	background-attachment: fixed;
	background-image: url(media/fondrepeat-y.gif);
	background-repeat: repeat-y;
	background-position: center top;
	width: 880px;
	margin-right: auto;
	margin-left: auto;
}
#containerbas {
	background-image: url(media/fondbas.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 5px;
	width: 880px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
#banplusnav  {
	height: 130px;
	width: 870px;
	margin-top: 0px;
	margin-left: 5px;
	overflow: visible;
	position: relative;
	background-image: url(media/banniere.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
#menu   {
	background-color: #360;
	display: block;
	height: 30px;
	width: 870px;
	margin-top: 100px;
	margin-right: 0px;
	margin-left: 0px;
	position: absolute;
	padding: 0px;
	margin-bottom: 0px;
}
#menu li   {
	display: inline;
	list-style-type: none;
	margin-left: 0px;
	float: left;
	padding-right: 0px;
	padding-left: 0px;
	position: relative;
}
#menu li a   {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 30px;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	padding-right: 10px;
	padding-left: 10px;
}
#menu li a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCC;
	background-color: #090;
	font-weight: bold;
	padding-top: 8px;
	padding-right: 10px;
	padding-bottom: 8px;
	padding-left: 10px;
}
#menu li ul  {
	filter: progid:DXImageTransform.Microsoft.alpha(opacity=80);
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	display: block;
	margin-top: 0px;
	margin-left: 0px;
	background-color: #360;
	padding-left: 0px;
	float: none;
	position: absolute;
	width: 133px;
	overflow: hidden;
	padding-top: 0px;
	height: 0px;
	z-index: 4;
}
#menu li ul li   {
	height: 30px;
	margin-left: 0px;
	list-style-type: none;
	padding-left: 0px;
	float: none;
	position: relative;
	display: block;
}
#menu li ul li a   {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 30px;
	font-weight: bold;
	color: #FFF;
	background-color: #360;
	margin-left: 0px;
	width: 100%;
	padding-right: 150px;
	padding-left: 10px;
}
#menu li ul li a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 30px;
	font-weight: bold;
	color: #FFF;
	background-color: #090;
	margin-left: 0px;
	width: 100%;
	padding-top: 8px;
	padding-right: 150px;
	padding-bottom: 8px;
	padding-left: 10px;
}
#menu #spacerli   {
	width: 380px;
	height: 30px;
}
#iframediv  {
	height: 670px;
	width: 870px;
	margin-top: 0px;
	margin-left: 5px;
	position: relative;
}
.arial12noir {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
}
2
Réponse 2 / 4
Judes-Emile Bornes IV Messages postés 123 Date d'inscription   Statut Membre Dernière intervention   12
  
$LICOUNT = document.li.ul.getElementsByTagName("li").length;
$MENUHEIGHT = ($LICOUNT*30);

avec ça ça marche

merci quand même
0
Réponse 3 / 4
Judes-Emile Bornes IV Messages postés 123 Date d'inscription   Statut Membre Dernière intervention   12
 
heu en fait non ça marche pas... désolé je me suis trompé. cette fonction ne stoppait plus la fonction suivante, mais j'avais remplacé la réf $MENUHEIGHT par un chiffre c'est pourquoi je pensais que ça marchait
0
Réponse 4 / 4
Judes-Emile Bornes IV Messages postés 123 Date d'inscription   Statut Membre Dernière intervention   12
 
bon visiblement ça vient pas de cette fonction, mais plutot de JQuery qui n'accepte pas de variable pour modifier la hauteur css... bon à savoir mais méga frustrant. Je suis bon pour une feature request. 
<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("#menu1").hoverIntent(makeTall,makeShort);
		var LImenu = document.getElementById("menu1");
		var LIs = LImenu.getElementsByTagName("li");
		var LIsCOUNT = LIs.length;
		$MENUHEIGHT = (LIsCOUNT*30);
		alert ("Le menu aura la hauteur suivante : " + $MENUHEIGHT + "px");
		function makeTall(){ $("#menu li ul").animate({"height":90},100);}
		function makeShort(){ $("#menu li ul").animate({"height":0},100);}
		}); // close document.ready
</script>
0

Discussions similaires

Huawei P8 Lite "nouveau tag ajouté"
ArianeKathleen -
Mn -

25 réponses
Nouveau tag ajouté - Utilité
Eerfers -
madmyke -

1 réponse
Page qui s’ouvre toute seule
Dolphie -
Manon -

5 réponses
Comment télécharger un torrent ?
Gotdann2003 -
ROSSi -

2 réponses
sais quoi un tag
marijon07 -
marijon07 -

4 réponses