Wrap nested list elements inside a Div

[Ahmed Na]

I have a dynamic link generated from a database i'm trying to wrap every 9 links ( or any N number) inside a container using javaScript, the problem is it counts the children too.

My code locks like this ( a list of nested items) :

<ul>
<li>Item A
     <ul>
          <li>Item A1</li>
          <li>Item A2</li>
          <li>Item A3</li>
          <li>Item A4</li>
     </ul>
</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
<li>Item E</li>
<li>Item F</li>
     <ul>
          <li>Item F1</li>
          <li>Item F2</li>
          <li>Item F3</li>
     </ul>
</li>
<li>Item G</li>
<li>Item H</li>
</ul>

And i need it to count the main (li) not counts the children too, Every example I found uses a simple list instead of a nested list so their examples don't work.

Any ideas?

[Dormilich]

i'm trying to wrap every 9 links ( or any N number) inside a container using javaScript

you are aware that <li>s may only be wrapped in <ul> or <ol> tags?

[Ahmed Na]

Yes, sorry maybe i couldn't be clear, I need it to be like this code so it will wrapped inside a Div with ul inside it as an example :

 
 <div class="wrapper">
   <ul>
       <li>Item A
         <ul>
          <li>Item A1</li>
          <li>Item A2</li>
          <li>Item A3</li>
          <li>Item A4</li>
       </ul>
      </li>
      <li>Item B</li>
      <li>Item C</li>
      <li>Item D</li>  
   </ul>
</div>
 
 <div class="wrapper">
   <ul>
         <li>Item E</li>
         <li>Item F</li>
             <ul>
                <li>Item F1</li>
                <li>Item F2</li>
                <li>Item F3</li>
             </ul>
        </li>
        <li>Item G</li>
        <li>Item H</li>
   </ul>
</div>
 
 

Thanks

[Dormilich]

essentially, I’d give the top <ul> a class or ID and then use document.querySelectorAll("ul#id > li") to get a reference to the first level <li>.