By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,191 Members | 1,256 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,191 IT Pros & Developers. It's quick & easy.

Wrap nested list elements inside a Div

P: 7
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) :
Expand|Select|Wrap|Line Numbers
  1. <ul>
  2. <li>Item A
  3.      <ul>
  4.           <li>Item A1</li>
  5.           <li>Item A2</li>
  6.           <li>Item A3</li>
  7.           <li>Item A4</li>
  8.      </ul>
  9. </li>
  10. <li>Item B</li>
  11. <li>Item C</li>
  12. <li>Item D</li>
  13. <li>Item E</li>
  14. <li>Item F</li>
  15.      <ul>
  16.           <li>Item F1</li>
  17.           <li>Item F2</li>
  18.           <li>Item F3</li>
  19.      </ul>
  20. </li>
  21. <li>Item G</li>
  22. <li>Item H</li>
  23. </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?
Jan 29 '14 #1
Share this Question
Share on Google+
3 Replies


Dormilich
Expert Mod 5K+
P: 8,639
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?
Jan 29 '14 #2

P: 7
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 :

Expand|Select|Wrap|Line Numbers
  1.  
  2. <div class="wrapper">
  3.    <ul>
  4.        <li>Item A
  5.          <ul>
  6.           <li>Item A1</li>
  7.           <li>Item A2</li>
  8.           <li>Item A3</li>
  9.           <li>Item A4</li>
  10.        </ul>
  11.       </li>
  12.       <li>Item B</li>
  13.       <li>Item C</li>
  14.       <li>Item D</li>  
  15.    </ul>
  16. </div>
  17.  
  18. <div class="wrapper">
  19.    <ul>
  20.          <li>Item E</li>
  21.          <li>Item F</li>
  22.              <ul>
  23.                 <li>Item F1</li>
  24.                 <li>Item F2</li>
  25.                 <li>Item F3</li>
  26.              </ul>
  27.         </li>
  28.         <li>Item G</li>
  29.         <li>Item H</li>
  30.    </ul>
  31. </div>
  32.  
  33.  
Thanks
Jan 29 '14 #3

Dormilich
Expert Mod 5K+
P: 8,639
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>.
Jan 29 '14 #4

Post your reply

Sign in to post your reply or Sign up for a free account.