PDA

View Full Version : Javascript child elements


Cionno
06-06-2007, 10:06
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

MEMon
06-06-2007, 11:45
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.

Cionno
06-06-2007, 12:05
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...

MEMon
06-06-2007, 12:18
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.

Cionno
06-06-2007, 12:20
grazie mille appena ho un pochino di tempo provo

sei stato gentilissimo :)

MEMon
06-06-2007, 12:21
di nulla!

Cionno
06-06-2007, 14:53
di nulla!

tutto apposto solo che ovviamente con ie nn funziona...

:help:

MEMon
06-06-2007, 15:13
Il codice postato da me funziona anche con IE(sto parlando del 6)

Cionno
06-06-2007, 15:38
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....

MEMon
06-06-2007, 15:39
un attimo di pazienza e ti posto quello funzionante

MEMon
06-06-2007, 15:41
<!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.

Cionno
06-06-2007, 15:54
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