Re build ul and li tag with JQuery

You can do it like this:

var n = 5;
var uls = $("#ul1 li").length / n;
for (i = 0; i < uls; i++) {
    var newUl = $("<ul/>", { id: "ul" + (i + 2) });
    $("ul").eq(i).after(newUl);
    newUl.append(newUl.prev().find("li:gt(" + (n - 1) + ")"));

}

      

        
        
        
      

    

Change the value n

according to your needs

Fiddle

Good question.

var parent = $(".container");
var items = parent.find("li");
var ul = $("<ul/>");
var counter = 0;
for (; counter < items.length; counter++) {
    if (counter > 0 && counter % 10 === 0) {
      parent.append(ul);
      ul = $("<ul/>"); // new list
    }
    ul.append(items[counter].detach());
}

      

        
        
        
      

    

You can use to repeat every 10th element. .nth-child(10n)

$("#ul1 li:nth-child(10n)").each(function(){
   $(this).prevAll('li').andSelf().wrapAll('<ul/>') 
});

      

        
        
        
      

    

Fiddle

Edit :

$("#ul1 li:nth-child(10n)").each(function(i){
    $(this).prevAll('li').andSelf().wrapAll($('<ul/>',{ id: 'ul'+(i+1)})) 
});

      

        
        
        
      

    

Try:

var liLength=$("li").length;
for(var i=0;i<liLength;i=i+10){
     $("li:eq("+i+"),li:gt("+i+"):lt("+(i+9)+")").wrapAll( "<div id=ui"+(i/10)+" />");
}

      

        
        
        
      

    

DEMO

thks for your answer :).

I also just got a solution here, what I am doing:

<script>
    $(document).ready(function(){
        var itemindex = 0;
        var Jlistobj = null;
        $('#list li').each(function()
        {
            if (itemindex % 10 == 0)
            {
               Jlistobj = $("<ul></ul>");
            }
            Jlistobj.append($(this));
            $('#out_div').append(Jlistobj);
            itemindex++;
        });
    });
</script>

      

        
        
        
      

    

I would create separate functions to split the array and display objects, for example:

Array.prototype.chunk = function(chunkSize) {
    var array=this;
    return [].concat.apply([],
        array.map(function(elem,i) {
            return i%chunkSize ? [] : [array.slice(i,i+chunkSize)];
        })
    );
}

renderUl = function(items) {
    var ul = $('<ul>');
    $.each(items, function(i, item){
        var li = $('<li>');
        li.html($(item).html());
        li.appendTo(ul);
    });
    return ul;
}

var items = $('#original li').toArray();
var chunked = items.chunk(10);

var output = $('<div />');

$.each(chunked, function(i, items){
    output.append(renderUl(items));
})

$('#original').replaceWith(output);

      

        
        
        
      

    

demo violin

The chunk function is shamelessly taken from Split an array into chunks