I try to find the way to split ul tag by showing only 10 li tag per ul.
我试图通过每ul只显示10个li标签来找到分割ul标签的方法。
Suppose I have li 30 elements. script will be re build into 3 ul and each ul has 10 li tag.
假设我有30个元素。脚本将重建为3 ul,每个ul有10 li标签。
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):
Jquery将重建ul到3 ul(10 li / 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
请指导,谢谢
9 个解决方案
#1
1
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
根据需要更改n的值
#2
0
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());
}
#3
0
You can use .nth-child(10n)
to iterate over each 10th element.
您可以使用.nth-child(10n)迭代每个第10个元素。
$("#ul1 li:nth-child(10n)").each(function(){
$(this).prevAll('li').andSelf().wrapAll('<ul/>')
});
Edit :
$("#ul1 li:nth-child(10n)").each(function(i){
$(this).prevAll('li').andSelf().wrapAll($('<ul/>',{ id: 'ul'+(i+1)}))
});
#4
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();
#5
0
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>
#6
0
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);
chunk function shamelessly taken from Split array into chunks
块函数无耻地从Split数组中取出成块
#7
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)+" />");
}
#8
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;
}
}
#9
0
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>
#1
1
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
根据需要更改n的值
#2
0
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());
}
#3
0
You can use .nth-child(10n)
to iterate over each 10th element.
您可以使用.nth-child(10n)迭代每个第10个元素。
$("#ul1 li:nth-child(10n)").each(function(){
$(this).prevAll('li').andSelf().wrapAll('<ul/>')
});
Edit :
$("#ul1 li:nth-child(10n)").each(function(i){
$(this).prevAll('li').andSelf().wrapAll($('<ul/>',{ id: 'ul'+(i+1)}))
});
#4
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();
#5
0
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>
#6
0
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);
chunk function shamelessly taken from Split array into chunks
块函数无耻地从Split数组中取出成块
#7
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)+" />");
}
#8
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;
}
}
#9
0
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>