| Autor | Zpráva | ||
|---|---|---|---|
| regvac Profil * |
#1 · Zasláno: 10. 8. 2010, 11:48:13
Ahoj, lze nějak např. pomocí getElementsByTagName() vybrat jen divy první úrovně a pak jim třeba změnit nějakou vlastnost?
Příklad, vyberu div s označením 0 a chci změnit vlastnost pouze poddivům s označením 1,2,3 (čili divy v první úrovni), další vnořené divy nechci ovlivnit. Jde to nějak vyselektovat pomocí getElementsByTagName() jen první úroveň? <div style="margin-left:20px;border:1px solid black"><span style="background-color:green">0</span>
<div style="margin-left:20px;border:1px solid black"><span style="background-color:red">1</span>
<div style="margin-left:20px;border:1px solid black"><span style="background-color:blue">11</span></div>
<div style="margin-left:20px;border:1px solid black"><span style="background-color:blue">12</span></div>
<div style="margin-left:20px;border:1px solid black"><span style="background-color:blue">13</span>
<div style="margin-left:20px;border:1px solid black"><span style="background-color:yellow">131</span></div>
<div style="margin-left:20px;border:1px solid black"><span style="background-color:yellow">132</span></div>
</div>
</div>
<div style="margin-left:20px;border:1px solid black"><span style="background-color:red">2</span>
<div style="margin-left:20px;border:1px solid black"><span style="background-color:blue">21</span></div>
</div>
<div style="margin-left:20px;border:1px solid black"><span style="background-color:red">3</span>
<div style="margin-left:20px;border:1px solid black"><span style="background-color:blue">31</span></div>
<div style="margin-left:20px;border:1px solid black"><span style="background-color:blue">32</span></div>
</div>
</div>Díky |
||
| PostCC Profil |
#2 · Zasláno: 11. 8. 2010, 13:34:14
To je takové dost neurčité zadání. Metodu getElementsByTagName se mi tam nepodařilo zamontovat, protože mi připadalo, že provedení pouze komplikuje. Nicméně myslím, že toto by mohlo vyhovět:
function GetFirstLevelSubItems() {
var Element = event.srcElement;
if(Element.tagName == "DIV" && Element.childNodes.length) {
for(var i = 0; i < Element.childNodes.length; i++) {
if(Element.childNodes[i].tagName == "DIV") Element.childNodes[i].style.color = "Red";
}
}
event.cancelBubble = true;
}
document.body.onclick = GetFirstLevelSubItems;
Pokud prvek, nad kterým došlo k události "onclick" je tagem DIV a obsahuje vnořené tagy, na všech prvoúrovňových DIVech nastaví vlastnost "style.color" na hodnotu "Red". Pozor, samozřejmě platí kaskádové dědění stylů, takže zčervená i písmo ve všech vnořených elementech, nicméně předpokládám, že jde o nějakou změnu vlastnosti, která nepodléhá dědění. Funguje v MSIE, pro jiné prohlížeče nutná úprava. |
||
| Chamurappi Profil |
#3 · Zasláno: 11. 8. 2010, 15:00:30
Reaguji na regvace:
Kromě zmíněných childNodes, v nichž jsou i textové uzly, podporuje většina prohlížečů (Firefox bohužel až od verze 3.5) i kolekci children, která obsahuje jen elementy. Chceš-li ale filtrovat přímé potomky podle tagName == "DIV", vyjde to nastejno.
Reaguji na PostCCe: „Pozor, samozřejmě platí kaskádové dědění stylů, takže zčervená i písmo ve všech vnořených elementech“ To není zrovna moc názorná demonstrace :-) Nerozumím, proč kolem řešení zadaného problému stavíš konstrukci s onclickem.
„Funguje v MSIE, pro jiné prohlížeče nutná úprava.“ Konkrétně: var event = window.event || arguments[0]; var Element = event.srcElement || event.target; if(event.stopPropagation) event.stopPropagation(); document.body.onclick.
Ještě bych měl jednu připomínku k efektivitě: Element.childNodes je tzv. živá HTML kolekce, což znamená, že jde o docela chytrý objekt a nikoliv o obyčejné pole, přestože se tak tváří. Až když se zeptáš na desátý index, vyhledá se prvních deset vyhovujících prvků a ten desátý se vrátí. Pokaždé, když se zeptáš na délku, vyhledají se všechny vyhovující prvky a vrátí se jejich počet. Každé hrábnutí do živé kolekce je mnohem složitější než hrábnutí do pole. (Živá je i kolekce vracená metodou getElementsByTagName.) Proto je lepší procházet potomky cyklem, který vyjde z Element.firstChild a proputuje vše přes nextSiblingy.
|
||
| PostCC Profil |
#4 · Zasláno: 11. 8. 2010, 15:35:51
Chamurappi:
Souhlas. Se vším. OnClick je tam proto, že mi to přišlo jako nejzřetelnější demonstrace funkce, předpokládám, že úprava pro jiné použití je záležitostí okamžiku. Šlo mi spíš o demonstraci postupu, který mi připadá primitivní ve srovnání s nuceným použitím getElementsByTagName(), kde by bylo nutno ještě filtrovat úroveň vnoření. |
||
|
Časová prodleva: 14 let
|
|||
0