Tree van html elementen maken
Ik heb een division met daarin weer andere elementen, in die div kunnen elementen bij komen of verwijderd worden.
Nu wil ik een soort boom-schema maken van deze div.
Dus als ik bijvoorbeeld dit stukje html heb:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="container">
<h1>Titel</h1>
<div>Tekst...</div>
Tekst....
<p>Tekst<b>Nog meer tekst</b></p>
</div>
<h1>Titel</h1>
<div>Tekst...</div>
Tekst....
<p>Tekst<b>Nog meer tekst</b></p>
</div>
Dan moet het schema er zo uit zien:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul>
<li>
container
<ul>
<li>H1 - "Titel"</li>
<li>Div - "Tekst..."</li>
<li>"Tekst...."</li>
<li>P - "Tekst"</li>
<ul>
<li>B - "Nog meer tekst"</li>
</ul>
</li>
</ul>
</li>
</ul>
<li>
container
<ul>
<li>H1 - "Titel"</li>
<li>Div - "Tekst..."</li>
<li>"Tekst...."</li>
<li>P - "Tekst"</li>
<ul>
<li>B - "Nog meer tekst"</li>
</ul>
</li>
</ul>
</li>
</ul>
Dus ik maak met javascript een loop die alle elementen in de container-div doorgaat, en kijk of er nog elementen in elkaar zitten, maar eigenlijk kan dit onbeperkt doorgaan, je zou honderd html elementen in elkaar kunnen nesten, dus zou ik zelf honderd loops handmatig moeten typen, ik weet dus niet hoe ik dit moet doen met 1 of 2 loops.
Dit heb ik nu
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script>
function maakSchema() {
container = document.getElementById("container");
elements = container.getElementsByTagName("*"); // Alle elementen in de container
for(i = 0; i < elements.length; i++) {
if(elements[i].getElementsByTagName("*").length > 0) { // Kijken of er nog elementen in elkaar staan (kan onbeperkt doorgaan... dus dit is al niet goed)
// Vanaf hier weet ik het niet meer
}
}
}
</script>
function maakSchema() {
container = document.getElementById("container");
elements = container.getElementsByTagName("*"); // Alle elementen in de container
for(i = 0; i < elements.length; i++) {
if(elements[i].getElementsByTagName("*").length > 0) { // Kijken of er nog elementen in elkaar staan (kan onbeperkt doorgaan... dus dit is al niet goed)
// Vanaf hier weet ik het niet meer
}
}
}
</script>
Verder is mijn probleem nog dat ik alleen elementen ophaal, en dus niet de tekst die misschien helemaal niet eens in een element staat.
Gewijzigd op 10/05/2013 11:30:22 door Mark Hogeveen
Simpel voorbeeldje in php voor het doorlopen van een multidimensionale array:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
function print_array( $array ){
echo '<ul>';
foreach( $array as $element ){
if ( is_array( $element ) ){
print_array( $element );
} else {
echo '<li>'.$element.'</li>';
}
}
echo '</ul>';
}
$array = array(
'waarde',
'waarde',
array(
'waarde',
array(
'waarde'
),
'waarde'
),
'waarde'
);
print_array( $array );
?>
function print_array( $array ){
echo '<ul>';
foreach( $array as $element ){
if ( is_array( $element ) ){
print_array( $element );
} else {
echo '<li>'.$element.'</li>';
}
}
echo '</ul>';
}
$array = array(
'waarde',
'waarde',
array(
'waarde',
array(
'waarde'
),
'waarde'
),
'waarde'
);
print_array( $array );
?>
Maar hoe kom ik aan uitleg of stukjes code? Moet ik de broncode van die pagina lezen?
Erwin H, oke zoiets soortgelijks ga ik dan doen in js, maar jouw array is al vooral gevuld, het is voor mij juist zo moeilijk om überhaupt een array te krijgen van elementen, niet om van een array een html-lijst te maken.
Gewijzigd op 10/05/2013 11:48:12 door Mark Hogeveen
Het gaat om de structuur, niet om het datatype. Een multidomensionale array kan je als een boom structuur zien, een DOMNodeList kan je als een boomstructuur zien. Zelfde structuur, zelfde oplossing (alleen een iets andere invulling).