Adding elements into an li with jquery

Question

If I have a ul with 10 li elements in it, with jQuery what would be the quickest and least intensive way of splitting that group of lis into three uls (still within the original ul) to end up with something like this:

<ul>
  <li>
    <ul>
      <li>list item 1</li>
      <li>list item 2</li>
      <li>list item 3</li>
      <li>list item 4</li>
    </ul>
    <ul>
      <li>list item 5</li>
      <li>list item 6</li>
      <li>list item 7</li>
    </ul>
    <ul>
      <li>list item 8</li>
      <li>list item 9</li>
      <li>list item 10</li>
    </ul>
  </li>
</ul>

I tried using .wrap but that seemed to be wrapping every element in the list (understandable, it's an array after all), I'm currently thinking that creating the new uls and injecting the existing lis into them.

Any thoughts are welcome, I've not used jQuery much before. Thanks

Use .each() to loop through each li, and then .prepend() and .append() to add ul tags in the right places. — R2-Bacca, Mar 29 '12 at 14:48
possible duplicate http://stackoverflow.com/questions/1644668/jquery-split-long-ul-list-in-smaller-lists — Th0rndike, Mar 29 '12 at 14:50
if you split by three, where do the rest of the li's go if their number is not evenly divided by 3 ? — FreeCandies, Mar 29 '12 at 14:50
I can't share as it's a bit theoretical that I was messing with to learn more jQuery — Del, Mar 29 '12 at 15:52

score 1 · Answer 1 · answered Mar 29 '12 at 15:39

1

Give this a go.

http://jsfiddle.net/WqXnS/1/

It creates a new list rather than replacing the original list simply for illustrative purposes.

answered Mar 29 '12 at 15:39

Greg

31,180
18
65
85

Thanks for that, Th0rndike above appears to have found a good duplicate that I didn't so I'm going with that just now. – Del Mar 29 '12 at 15:53

Adding elements into an li with jquery

1 Answers1