使用 jQuery,分割列表最有效的方法是什么
<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 个项目。
我希望将对 DOM 的查询和操作保持在最低限度,并将原始 DOM 元素移动到新列表中,而不是克隆它们。
这是我到目前为止所想出的:
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"));
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)