View Full Version : Javascript child elements
volevo chiedervi se è possibile ottenere in javascript una lista dei soli primi elementi (nel mio caso tag <UL>) che si trovano annidati dentro un div...
ovvero escludento gli annidamenti successivi....
document.getElementById('menu').getElementsByTagName('ul').length
questo mi restitiusce il numero di ul annidati nel div menu
ora vorrei capire come ottenere per successivamente modificarne le proprietà il numero (per poi creare un'array di elementi) dei soli primi tag ul figli diretti del tag parent ul nel div menu
grazie e scusate il casino
per ogni <UL> che hai trovato ripeti la stessa cosa ma prendendo solo il primo:
getElementsByTagName('ul')[0]
Oppure protesti provare un firstChil, ma se usi l'identazione ti ritornera quasi sicuramente un nodo di testo.
innanzitutto grazie per la risposta
ti prego abbi pazienza....
se io ho (semplificando molto )
ul
--> ul
--> ul
ul
--> ul
ul
e a me interessano il primo il quarto e l'ultimo ....come hai detto tu mi sembra (almeno da profano) che prenda solo il primo...
a me interessa costruire un'array di oggetti che contengano solo i 3 menzionati...
Scusami avevo capito male io allora!
Puoi fare così:
var menu=document.getElementById("menu");
var ulElements=[];
var n=menu.childNodes.length;
for(var i=0;i<n;i++){
if(menu.childNodes[i].nodeName=="UL") ulElements.push(menu.childNodes[i]);
}
In pratica scorri i nodi direttamente discendendi di "menu" e controlli se siano di tipo UL, questo perchè, come ti ho detto prima, se usi l'identazione c'è caso che ce ne siano anche di tipo Text.
I nodi che ti interessano rimangono nell'array ulElements.
grazie mille appena ho un pochino di tempo provo
sei stato gentilissimo :)
di nulla!
tutto apposto solo che ovviamente con ie nn funziona...
:help:
Il codice postato da me funziona anche con IE(sto parlando del 6)
Il codice postato da me funziona anche con IE(sto parlando del 6)
si... il fatto è che ho dovuto fare delle modifiche per adattarlo ai miei scopi e purtroppo esistono differenze sostanziali nell'interpretazione di childNodes tra ie e ff nel mio caso x ff > h2 >#text > ul mentre per ie h2 > ul....
un attimo di pazienza e ti posto quello funzionante
<!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>Untitled Document</title>
<script type="text/javascript">
var ulmodlist=new Array;
function showhide(theobj){
hidstatus=(theobj.style.display=="none");
if(hidstatus) theobj.style.display="block"
else theobj.style.display="none"
}
function ulstylizer(){
/* BUILDING UL LIST*/
var menu=document.getElementById("menu");
var liElements=new Array;
for(var i=0;i<menu.childNodes.length;i++){
if(menu.childNodes[i].nodeName=="LI") liElements.push(menu.childNodes[i]);
}
var h2nest=new Array;
nest=document.getElementById('menu');
h2nest=nest.getElementsByTagName('h2');
var button=null;
for(var i=0; i<nest.getElementsByTagName('h2').length; i++){
button=createToggleButton();
button.onclick=function(){showhide(this.parentNode.parentNode.getElementsByTagName("ul")[0]);};
h2nest[i].appendChild(button);
}
}
function createToggleButton(){
var button=document.createElement("input");
button.setAttribute("type","button");
button.setAttribute("width","10px");
button.setAttribute("height","10px");
button.setAttribute("alt","+");
button.setAttribute("value","+");
return button;
}
</script>
</head>
<body onload="ulstylizer();">
<ul>
<li>
<h2> menu1</h2>
<ul>
<li> submenu1</li>
<li> submenu2</li>
<li> submenu3</li>
<li> submenu4</li>
</ul>
</li>
</ul>
<ul id="menu">
<li>
<h2> menu1</h2>
<ul>
<li> <a href="#">submenu1</a></li>
<li> submenu2</li>
<li> submenu3</li>
<li> submenu4</li>
</ul>
</li>
<li >
<h2> menu2</h2>
<ul >
<li> submenu1</li>
<li> submenu2</li>
<li> submenu3</li>
<li> submenu4</li>
</ul>
</li>
<li >
<h2> menu3</h2>
<ul >
<li> submenu1</li>
<li> submenu2</li>
<li> submenu3</li>
<li> submenu4</li>
</ul>
</li>
</ul>
</body>
</html>
Cerca di usare l'identazione per il codice che scrivi, risulterà molto più chiaro e pulito.
Ti ho modificato la funzione per nascondere i menu, ora passi direttamente l'oggetto, e ti ho messo una funzione per creare il pulsante dinamicamente.
Cerca di usare l'identazione per il codice che scrivi, risulterà molto più chiaro e pulito.
Ti ho modificato la funzione per nascondere i menu, ora passi direttamente l'oggetto, e ti ho messo una funzione per creare il pulsante dinamicamente.
ehm... hai ragione :p un enorme GRAZIE... mo cerco di capire il codice :P
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.