re build ul and li tag with Jquery

Question

I try to find the way to split ul tag by showing only 10 li tag per ul.

Suppose I have li 30 elements. script will be re build into 3 ul and each ul has 10 li tag.

How can I do this ?

suppose original is :

<ul id="ul1" style="">
    <li><a href="#"><span>Adidas</span></a></li>
    <li><a href="#"><span>jason markk</span></a></li>
    <li>... 28 mores </li>
</ul>

Jquery will re build ul in to 3 ul (10 li per ul):

<ul id="ul1" style="">
    <li>10 times</li>
</ul>
<ul id="ul2" style="">
    <li>10 times</li>
</ul>
<ul id="ul3" style="">
    <li>10 times</li>
</ul>

Please guide, Thanks

Iterate over `li`s in original list. While they exist, generate a new `ul` and attach first 10 `li`s to it. Finally, delete original list, now empty — blgt, Jun 19 '15 at 10:12
@Ryo, please check the answers below, and accept the answer which helped you. So that this question won't be left unanswered. — Shaunak D, Jun 20 '15 at 11:33

score 1 · Answer 1 · answered Jun 19 '15 at 10:13

You can do 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 of n according to your need

Fiddle

Milind Anantwar · Answer 2 · 2015-06-19T10:22:47.043

0

You can use:

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

Working Demo

edited Jun 19 '15 at 10:22

answered Jun 19 '15 at 10:12

Milind Anantwar

81,290
25
94
125

Varun · Answer 3 · 2015-06-19T10:51:20.100

0

My try:

var no=$("#ul1").children().size();
var count=0,tmpstr='';
for(var j=0;j<no;j++)
{
  if(count<10)
  {
      tmpstr=tmpstr+"<li>"+$("#ul1 li:nth-of-type("+(j+1)+")").html()+"</li>";
      count++;
 }

 if(count==10 || j==(no-1))
 {
     $(".uj").append("<ul>"+tmpstr+"</ul>");
     tmpstr='';
     count=0;
}
}

edited Jun 19 '15 at 10:51

answered Jun 19 '15 at 10:15

Varun

1,946
2
11
17

score 0 · Answer 4 · answered Jun 19 '15 at 10:18

Nice 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());
}

score 0 · Answer 5 · answered Jun 19 '15 at 10:19

You can use .nth-child(10n) to iterate over each 10th element.

$("#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)})) 
});

Balachandran · Answer 6 · 2015-06-19T10:42:38.293

0

Try it:

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

edited Jun 19 '15 at 10:42

answered Jun 19 '15 at 10:23

Balachandran

9,567
1
16
26

score 0 · Answer 7 · answered Jun 19 '15 at 10:28

thks for your answer :) .

I also just get the solution here's what im 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>

score 0 · Answer 8 · edited May 23 '17 at 10:26

I would create separate functions for chunking array and displaying objects, something like:

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 fiddle

chunk function shamelessly taken from Split array into chunks

score 0 · Answer 9 · edited May 23 '17 at 12:29

Using an earlier answer, you could group those elements together like so:

$.fn.every = function(n) {
    var arr = [];
    for (var i = 0; i < this.length; i += n) {
        arr.push(this.slice(i, i + n));
    }
    return this.pushStack(arr, "every", n);
}

var id = 1; // current id
$('#ul1 > li')
  .slice(10) // skip first ten
  .every(10) // group every ten thereafter
  .each(function() {
    // create new <ul> and place after the last one
    $('#ul' + id)
      .after($('<ul>', {id: 'ul' + ++id}).append(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul1" style="">
  <li><a href="#"><span>Adidas</span></a></li>
  <li><a href="#"><span>jason markk</span></a></li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>

  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
  <li>... 28 mores </li>
</ul>

re build ul and li tag with Jquery

9 Answers9

Linked