DOM koka apstaigāšana

[Paulinjsh]

Tāks. Problēma sekojoša. Ir ~ šāda html struktūra

 

<div><a href="#">1</><input type="checkbox" /></div>
<div id="ch1">
 <div><a href="#">2.1.</><input type="checkbox" /></div>
 <div><a href="#">2.2.</><input type="checkbox" /></div>
 <div><a href="#">2.3</><input type="checkbox" /></div>
 <div id="ch2">
   <div><a href="#">2.3.1</><input type="checkbox" /></div>
   <div><a href="#">2.3.2</><input type="checkbox" /></div>
 </div>
</div>

 

Nepieciešams, lai uzklikojot uz 1 checkbox active paliktu visi checkboxi, kas ir iekš ch1.

Tāpat nepieciešams, lai uzklikojot teiksim uz 2.3. chekboxa active paliktu visu checkboxi, kas ir iekš ch2.

 

Zinu, ka to var izdarīt ar dom funkcijām, bet nu pieredzes ar tām nav. Varbūt varat kāds pamest kādu ideju?

 

Danke jau iepriekš!

[andrisp]

Ja tev struktūra tieši šāda (visu laiku viena un tādi pati), tad saliec visiem unikālus id vai name un sataisi pēc tiem.

 

Bet vispār tev struktūra diezgan neloģiska ir. Jāpēc chapter 2 ir iekš chapter 1 ? Vai tiem nevajadzētu būt atsevišķi ? Kāpēc spiežot uz 1 atvērsies 2.x sadaļas, bet spiežot uz 2.3 atvērsies 2.3.x sadaļas ? Uz 1 spiežot nevajadzētu 1.x atvērties ?

 

PS. Vārda "atvērties" vietā domāju "ieselektēties" :)

[Paulinjsh]

Nu tur bik ir kļūda :) Un nav tas chapter, pirmais kas iešāvās prātā arī tika rakstīts.

Tur tiek ģenerēts teiksim lapas karte. Tāda struktūra vajadzīga, lai var uztaisīt show/hide katra elementa bērniem.

 

Chekbox bija sataisīts jau ar unikāliem vārdiem, bet nu tas koks ir diezgan liels un vairāk nekā 2 līmeņos.

Biju kkad uztaisījis risinājumu un rakstīju visus bērnus, bērnu bērnus utt masīvos, bet nu tas ir liels marasms.

Gribu kko īsāku uzrakstīt, tpc iedomājos ar DOM to uzrakstīt tikai kkā nevedās ;/

Edited November 1, 2006 by Paulinjsh

[Paulinjsh]

Cītīgāk pameklēju tantē un izmantošu adaptētu šādu risinājumu:

 

function goThroughDOMStart(objId, outId, chkHideId)
{
var theObject = document.getElementById(objId);
var outputObj = document.getElementById(outId);
var chkHideObj = document.getElementById(chkHideId);
outputObj.value = objId + '\nLevel [description of object] tagName\n';
var hideIt = chkHideObj.checked;
var level = 0;
goThroughDOM(theObject, level, outputObj, hideIt);
}
function goThroughDOM(obj, lvl, outputObj, hideIt)
{
for (var i=0; i<obj.childNodes.length; i++) {
	var childObj = obj.childNodes[i];
	if (!hideIt || childObj.tagName) {
		outputObj.value += Math.pow(10,lvl) + ' ' + childObj + ' ' + childObj.tagName + '\n';	
	}
	goThroughDOM(childObj, lvl + 1, outputObj, hideIt);
}
}