用Jquery重建ul和li标签 [英] re build ul and li tag with Jquery

问题描述

我试图找到分裂ul标签的方式，通过每ul显示只有10 li标签。

假设我有li 30元素。

我如何做到这一点？

suppose original is：

 < ul id =ul1style => 
< li>< a href =＃>< span> Adidas< / span>< / a>< / li& 
< li>< a href =＃>< span> jason markk< / span>< / a>< / li& 
< li> ... 28 mores< / li> 
< / ul> 
 

Jquery将重建ul到3 ul（10 ul per ul）：

 < ul id =ul1style => 
< li> 10次< / li> 
< / ul> 
< ul id =ul2style => 
< li> 10次< / li> 
< / ul> 
< ul id =ul3style => 
< li> 10次< / li> 
< / ul> 
  
 
 
 
请指导，
感谢
 
 
 
  var n = 5; 
 var uls = $（＃ul1 li）。length / n; 
 for（i = 0; i  var newUl = $（< ul />，{id：ul+（i + 2） ; 
 $（ul）。eq（i）.after（newUl）; 
 newUl.append（newUl.prev（）。find（li：gt（+（n-1）+）））; 
 
} 
  
更改 n 根据需要
 
 
 
  小提琴  
 
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
解决方案
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

                        
这篇关于用Jquery重建ul和li标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！