A newbie question here.

How can I select a range of li so I can moved them inside new element?

For example:

```
<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

```

To be like this:

```
<ul>
  <li>
    <div class="column1">
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
    </div>
  </li>
  <li>
    <div class="column2">
      <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
    </div>
  </li>
</ul>

```

So far I tried using Jquery:

```
(function ($) {
  Drupal.behaviors.menu = {
    attach: function (context, settings) {

    $('#navigation ul li.expanded').hover(function() {
      $(this).find('ul').css('display', 'block');
    }, function() {
      $(this).find('ul').css('display', 'none');
    });

    var $lists = $('#navigation li.expanded ul.menu'); 

    // Loop through all target lists.
    $lists.each(function(i, e) {
      var $list = $(e);

      //These are temporary variables.
      var $new_list = $('<ul>');
      var $list_item, $sub_list, $sub_set;

      // The number of items per column.
      var per_column = 6;

      // Calculate the amount of columns needed.
      var n = Math.ceil($list.find('li').length / per_column);

      // Loop through all columns.
      for (var i = 0; i < n; ++i) {
        // Creates the sub list for the current column.
        $sub_list = $('<ul>');

        // Gets the first set of list items from the original list and adds them to the sub list created above.
        $sub_set = $list.find('li').slice(0, per_column).appendTo($sub_list);

        // Creates a new list item and adds the sub list to it.
        $list_item = $('<li>').append($sub_list);

        // Add the newly created list item to the new list.
        $new_list.append($list_item);

        // Create a div with the class 'columnX' and wrap the sub list with it.
        $sub_list.wrap('<div class="column' + (i + 1) + '"></div>');
      }

      // Replace the original list with the new one.
      $list.html($new_list.html());
    }); 

  };
})(jQuery);

```

The above approach generates "![enter image description here](https://i.stack.imgur.com/q36Rp.png)

But I'm having difficulty in manipulating elements via Jquery or JS. Any thoughts will be appreciated. Thanks