How to group li element via using Drupal.behaviors? A newbie question here.

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

For example:

&lt;ul&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;li&gt;test&lt;/li&gt;
  &lt;li&gt;test&lt;/li&gt;
&lt;/ul&gt;


To be like this:

&lt;ul&gt;
  &lt;li&gt;
    &lt;div class="column1"&gt;
      &lt;ul&gt;
        &lt;li&gt;test&lt;/li&gt;
        &lt;li&gt;test&lt;/li&gt;
        &lt;li&gt;test&lt;/li&gt;
        &lt;li&gt;test&lt;/li&gt;
        &lt;li&gt;test&lt;/li&gt;
        &lt;li&gt;test&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div class="column2"&gt;
      &lt;ul&gt;
        &lt;li&gt;test&lt;/li&gt;
        &lt;li&gt;test&lt;/li&gt;
        &lt;li&gt;test&lt;/li&gt;
        &lt;li&gt;test&lt;/li&gt;
        &lt;li&gt;test&lt;/li&gt;
        &lt;li&gt;test&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;


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 = $('&lt;ul&gt;');
      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 &lt; n; ++i) {
        // Creates the sub list for the current column.
        $sub_list = $('&lt;ul&gt;');

        // 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 = $('&lt;li&gt;').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('&lt;div class="column' + (i + 1) + '"&gt;&lt;/div&gt;');
      }

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

  };
})(jQuery);


The above approach generates "

But I'm having difficulty in manipulating elements via Jquery or JS. Any thoughts will be appreciated. Thanks
I am not completely sure I understand what you are trying to do - I am assuming the html is some kind of Drupal menu you are trying to add some kind of dropdown/flyout action to?

I am not sure whether you want to be doing all this DOM manipulation on mouseover/mouseout either? At least I think that's what you are doing from looking at that code snippet.

Taking your html example at face value, this bit of javascript should do the job of splitting it out into 'columns':

var $list = $('ul'),
    $items = $('li', $list),
    column_counter = 1,
    $current_list,
    items_to_column=6;

$items.each(function(index,item){
  if (index%items_to_column==0){
    var new_column = $("&lt;li&gt;&lt;div class='column"+column_counter+"'&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/li&gt;").appendTo($list);
    $current_list = $('ul', new_column);        
    column_counter ++;
  }
  $current_list.append( $(item).detach());
});