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:

Codice:

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ì:

Codice:

	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

Quote:

Originariamente inviato da MEMon

di nulla!

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

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

Quote:

Originariamente inviato da MEMon

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

Codice:

<!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

Quote:

Originariamente inviato da MEMon

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

un enorme GRAZIE... mo cerco di capire il codice :P

06-06-2007, 10:06	#1
Cionno Senior Member Iscritto dal: Jan 2004 Città: ilopaN Messaggi: 2454	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 __________________ MiniGx +++ FrEeWaRe! +++ Mercatino Usato Ultima modifica di Cionno : 06-06-2007 alle 10:44.

06-06-2007, 11:45	#2
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	per ogni <UL> che hai trovato ripeti la stessa cosa ma prendendo solo il primo: Codice: getElementsByTagName('ul')[0] Oppure protesti provare un firstChil, ma se usi l'identazione ti ritornera quasi sicuramente un nodo di testo.

06-06-2007, 12:05	#3
Cionno Senior Member Iscritto dal: Jan 2004 Città: ilopaN Messaggi: 2454	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... __________________ MiniGx +++ FrEeWaRe! +++ Mercatino Usato

06-06-2007, 12:18	#4
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	Scusami avevo capito male io allora! Puoi fare così: Codice: 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.

06-06-2007, 12:20	#5
Cionno Senior Member Iscritto dal: Jan 2004 Città: ilopaN Messaggi: 2454	grazie mille appena ho un pochino di tempo provo sei stato gentilissimo __________________ MiniGx +++ FrEeWaRe! +++ Mercatino Usato

06-06-2007, 12:21	#6
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	di nulla!

06-06-2007, 15:13	#8
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	Il codice postato da me funziona anche con IE(sto parlando del 6)

06-06-2007, 15:39	#10
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	un attimo di pazienza e ti posto quello funzionante

Strumenti
Mostra una versione stampabile Invia questa pagina per email