Split multiple LI to UL with Javascript

Question

I need to split multiple LI's into two UL's with javascript.

Only code I can edit is the templatefile:

[foreach array="nodes" as="node"]
  <li>
   <a href="%prefix%view/%node.id%" [if expr="%node.id%==%id% || %node.id%==%parent_id%"]  class="hoofdmenuactief"[/if]>%node.title%</a>
            %node.subnodes_html%
  </li>
[/foreach] 

PHP cannot be added to this file so I want to solve this with JavaScript:

<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
  <li><a href="#">Item 6</a></li>
</ul>

I want Javascript to count the LI's inside the UL and make 2 UL'd of it with LI's

The result should be:

<ul>
 <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>
<ul>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
  <li><a href="#">Item 6</a></li>
</ul>

The site uses Prototype. Does someone know an example of this or how I should start? Thanks in advance!!

Answer 1

I think you can do it in your template. I've only used Smarty, so you're gonna have to connect the dots on syntax

[LET nodesLen = nodes.length]
[LET countSoFar = 0]
[foreach array="nodes" as="node"]     --attributes for key? name? could be helpful
  <li>
    <a href="%prefix%view/%node.id%"]>%node.title%</a>
  </li>
[countSoFar++]
 [if countSoFar >= nodesLen / 2]
  <ul>
  </ul>
 [/if]
[/foreach] 

In smarty theres smarty..iteration which would do what I showed with countSoFar automatically. See what you're template engine is capable of and how you can implement what I sketched above.

I don't think you need prototype or any javascript to do this, and it seems like a problem much more easily handled by tpl