Organizational Research By

Surprising Reserch Topic

Experts Most Trusted Topic


jquery split long ul list in smaller lists


jquery split long ul list in smaller lists  using -'jquery,html,split,html-lists'

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?
    

asked Sep 9, 2015 by TNMJoycelyn
0 votes
14 views



Related Hot Questions



Government Jobs Opening

  • item1
  • item2
  • item3
  • item4
  • item5
  • item6
  • item7
  • item8
  • item9
  • item10
  • item11
  • item12
  • item13
  • item14
  • item15
  • item16
  • item17
  • item18
  • item19
  • item20
answered Sep 9, 2015 by XavChaffin
0 votes

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 = $("
    ").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.

    answered Sep 9, 2015 by NPLDix
    0 votes

    function:

    $.fn.splitUp=function(splitBy,wrapper) {
        $all= $(this).find('>*');
        var fragment=Math.ceil($all.length/splitBy);  
        for(i=0; i< fragment; i++) 
            $all.slice(splitBy*i,splitBy*(i+1)).wrapAll(wrapper);
        return $(this);
    }
    

    usage:

    $('ul#slides').splitUp(4,'<li class=splitUp><ul>')
    

    or:

    $('div#slides').splitUp(3,'<div/>')
    
    answered Sep 9, 2015 by TanGant
    0 votes

    this one splits the menu in to pieces of approximately equal length function splitMenu(menu_id, pieces) {

            var $menu = $(menu_id), group;
            var splitItem = 0, totItemLen = 0, cumlen = 0;
    
            $($menu).find('li').each(function(){ totItemLen = totItemLen + $(this).width(); });
    
            $($menu).find('li').each(function(i){
                cumlen = cumlen + $(this).width();
                if ( totItemLen/pieces < cumlen && splitItem == 0) splitItem = i;  
            });
    
            while((group = $($menu).find('li:lt(' + splitItem + ')').remove()).length){
                    $('
      ').attr('class',$($menu).attr('class')).append(group).appendTo($($menu).parent()); } $($menu).remove(); } splitMenu('#menu-footermenu', 2);
    answered Sep 9, 2015 by MacPrellnyto
    0 votes

    Just another version as a jQuery plugin:

    jQuery.fn.splitList = function(num) {
      var sublist;
      while((sublist = this.find('li:gt('+(num-1)+')').remove()).length){
        this.after($('
      ').append(sublist)); } };
    answered Sep 9, 2015 by NorineHardey
    0 votes

    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#list").replaceWith($("ul#list").children());
      answered Sep 9, 2015 by NannieLillic
      0 votes

      you can try something like this:

      $("ul").each(function(k,v)){
      	split_list(v);
      }
      
      function split_list(list){
      	var li_num = $(list).find("li").length;
      	if(li_num > 20){
      		var new_list = $("
        "); $(list).after(new_list); new_list.append($(list).find("li:gt(20)")); if(new_list.find("li").length > 20){ split_list(new_list); } } }

        LE: I think it can be further refined by finding up front how many new list will be createt, create those lists and move blocks of ~20 li's into the new created lists so they will be moved only once.

        answered Sep 9, 2015 by MarkoGuajard
        0 votes

        Something like this:

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

        Working Demo

        answered Sep 9, 2015 by UrsMetcalfe
        0 votes

        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.

        answered Sep 9, 2015 by MabelJ14nrt

        ...