jQuery split long ul list in smaller lists

Question

I have a long UL list I need to break up in smaller lists containing about 20 items each.

I was thinking I could use something like

$(function() {
    $("ul li:nth-child(20n)").after("</ul><ul>");
});

but that's not the case. Any idea how to use jQuery in a way that uses minimal CPU?

Answer 1

Here's a extension of the jQuery prototype ($.fn) object to provide a new method that can be chained to the jQuery() function.

I needed to functionality where I needed to add an element between the list that I split. That has been added as an optional parameter.

An example is available at http://jsfiddle.net/roeburg/5F2hW/

The usage of the function is like so:

 $("ul").customSplitList(5);

The function is defined as follows:

// Function definition
(function ($) {
    // Function is defined here ...
    $.fn.customSplitList = function (indexToSplit, elementToAddInBetween) {
        // Holds a reference to the element(list)
        var that = this;
        var subList, newList, listLength;

        // Only continue if the element is a derivitive of a list
        if ($(that) && ($(that).is("ul") || $(that).is("ol"))) {

            // Additionally check if the length & the split index is valid
            listLength = $(that).children().length;

            if ($.isNumeric(indexToSplit) && indexToSplit > 0 && indexToSplit < listLength) {
                // Based on list type, create a new empty list
                newList = $($(that).clone(true)).empty();

                while ((subList = this.find('li:gt(' + (indexToSplit - 1) + ')').remove()).length) {
                    newList.append(subList);
                }

                if (elementToAddInBetween && $(elementToAddInBetween)) {
                    that.after(newList);
                    newList.before(elementToAddInBetween);
                } else {
                    that.after(newList);
                }
            }
        }
    };

})(jQuery);

Hope this helps.

Answer 2

Nothing quite that simple (that I'm aware of at least) unfortunately. Try this as an alternative:

$(function() {
  $("ul").each(function() {
    var list = $(this);
    var size = 3;
    var current_size = 0;
    list.children().each(function() {
    console.log(current_size + ": " + $(this).text());
      if (++current_size > size) {
        var new_list = $("<ul></ul>").insertAfter(list);
        list = new_list;
        current_size = 1;
      }
      list.append(this);
    });
  });
});

You could no doubt turn this into a function that takes the chunk size as an argument but I leave that as an exercise for the reader.

Answer 3

Something like this:

var lis = $("ul > li");
for(var i = 0; i < lis.length; i+=20) {
  lis.slice(i, i+20).wrapAll("<ul></li>");
}
$("ul > ul").unwrap();

Working Demo

Answer 4

Here is another option - I haven't profiled any of the above, so go with whatever is fastest of course. It assumes the ul in question has the id of #list.

     var listItemsPerList = 10;
     var listItems = $("ul > li").length;

     for (var i = 0; i < Math.round(listItems / listItemsPerList); i++) {
         var startingItem = i * listItemsPerList;
         var endingItem = (i + 1) * listItemsPerList;
         if (endingItem > listItems) { endingItem = listItems };
         $("ul > li").slice(startingItem, endingItem).wrapAll("<ul></ul>");
     }

     $("ul#list").replaceWith($("ul#list").children());