Tree van html elementen maken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mark Hogeveen

Mark Hogeveen

10/05/2013 11:28:52
Quote Anchor link
Hallo, misschien weer een moeilijke vraag.

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<div id="container">
<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)
PHP script in nieuw venster Selecteer het PHP script
1
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>

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>

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
 
PHP hulp

PHP hulp

29/03/2024 00:46:10
 
Wouter J

Wouter J

10/05/2013 11:35:17
 
Erwin H

Erwin H

10/05/2013 11:44:44
Quote Anchor link
Dit soort boom structuren doorloop je normaal gesproken met een recursieve functie. Een recursieve functie is een functie die zichzelf aanroept en op die manier een theoretisch oneindig diepe boom kan doorlopen, zonder dat je zelf extra loops hoeft toe te voegen.

Simpel voorbeeldje in php voor het doorlopen van een multidimensionale array:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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 );
?>
 
Mark Hogeveen

Mark Hogeveen

10/05/2013 11:45:25
Quote Anchor link
Ja zoiets moet ik hebben.
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
 
Wouter J

Wouter J

10/05/2013 11:51:16
Quote Anchor link
Ook een DOMNodeList kan worden gebruikt als array. En ja, je kan eens in de broncode kijken naar de code die de DOM tree maakt.
 
Erwin H

Erwin H

10/05/2013 11:53:26
Quote Anchor link
@Harry
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).
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.