使用jquery将列表拆分成等大小的子列表的最有效的方式 [英] Most efficient way to split a list into equal sized sublists using jquery
本文介绍了使用jquery将列表拆分成等大小的子列表的最有效的方式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用jQuery,分割列表的最有效的方法是什么
Using jQuery, what's the most efficient way to split a list
<ul class="columnar"><li></li>... <li></li></ul>
到几个子列表
<ul class="column1"><li></li>... <li></li></ul>
<ul class="column2"><li></li>... <li></li></ul>
其中每个子列表(除了可能最后一个)都有n个项目。
where each sublist (apart from, possibly, the last one) has n items.
我想将DOM的查询和操作保持在最低限度,并将原始DOM元素移动到新列表中,而不是克隆它们。
I want to keep querying and manipulation of the DOM to a minimum and move the original DOM elements into the new lists rather than cloning them.
推荐答案
这是我到目前为止所得到的:
This is what I've come up with so far:
var $ul = $(this),
items = $ul.children("li"),
itemCount = items.length,
colHeight = Math.ceil(itemCount/3);
// create temp DOM node to place the new lists in
var temp = $("<div></div>"),
newUL,
i = 1;
while($ul.children("li").length > colHeight) {
newUL = $("<ul class=\"columns\"></ul>");
newUL.append(items.filter(":gt(" + ((i * colHeight)-1) + ")").filter(":lt(" + colHeight + ")"));
i++;
temp.append(newUL.addClass("column" + i));
}
temp.children().insertAfter($ul.attr("class","columns column1"));
这篇关于使用jquery将列表拆分成等大小的子列表的最有效的方式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文