jQuery разделил длинный список ул. в меньших списках
Я рекомендовал бы SubSonic, если Ваш проект работает с представлением ActiveRecord, что база данных является Вашей моделью. Вы получите один класс на таблицу, и все просто волшебно работает. Можно, конечно, настроить и переопределить вещи, но если бы Вы (или Ваш проект) существенно не соглашаетесь с подходом класса на таблицу, я посмотрел бы на NHibernate, так как это запускает с более сложного (но более гибкий) подход отображения Вашей модели предметной области к Вашей базе данных.
, Если Вы используете относительно простую базу данных, это находится под Вашим контролем (как в, можно измениться, столбцы, не отправляя восемь форм подразделению базы данных контролируют наблюдательный совет), я рекомендовал бы запуститься с SubSonic и переместиться в NHibernate, если SubSonic не удовлетворяет потребности.
6 ответов
I would create document fragments with your removed lis and then reappend them to the location you want them. In this case, I reappended them to the body:
$(function(){
var $bigList = $('#bigList'), group;
while((group = $bigList.find('li:lt(20)').remove()).length){
$('<ul/>').append(group).appendTo('body');
}
});
Live Demo is at: http://jsbin.com/ejigu/33
К сожалению, ничего такого простого (по крайней мере, я знаю). Попробуйте это в качестве альтернативы:
$(function() {
$("ul").each(function() {
var list = $(this);
var size = 3;
var current_size = 0;
list.children().each(function() {
console.log(current_size + ": " + $(this).text());
if (++current_size > size) {
var new_list = $("<ul></ul>").insertAfter(list);
list = new_list;
current_size = 1;
}
list.append(this);
});
});
});
Вы, несомненно, могли бы превратить это в функцию, которая принимает размер блока в качестве аргумента, но я оставляю это как упражнение для читателя.
Вот рабочий пример, просто измените мод 5 на мод 20.
<html>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
function onLoad(){
var itemindex = 0;
var Jlistobj = null;
$('#list li').each(function()
{
if (itemindex % 5 == 0)
{
Jlistobj = $("<ul></ul>");
}
Jlistobj.append($(this));
$('#out_div').append(Jlistobj);
itemindex++;
});
}
</script>
<body onLoad="onLoad()">
<ul id="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
<li>item16</li>
<li>item17</li>
<li>item18</li>
<li>item19</li>
<li>item20</li>
</ul>
<div id="out_div"></div>
</body>
</html>
Вот еще один вариант - я не профилировал ничего из вышеперечисленного, поэтому, конечно, выбирайте то, что будет быстрее всего. Предполагается, что рассматриваемая ul имеет идентификатор #list.
var listItemsPerList = 10;
var listItems = $("ul > li").length;
for (var i = 0; i < Math.round(listItems / listItemsPerList); i++) {
var startingItem = i * listItemsPerList;
var endingItem = (i + 1) * listItemsPerList;
if (endingItem > listItems) { endingItem = listItems };
$("ul > li").slice(startingItem, endingItem).wrapAll("<ul></ul>");
}
$("ul#list").replaceWith($("ul#list").children());
вы можете попробовать что-то вроде этого:
$("ul").each(function(k,v)){
split_list(v);
}
function split_list(list){
var li_num = $(list).find("li").length;
if(li_num > 20){
var new_list = $("<ul></ul>");
$(list).after(new_list);
new_list.append($(list).find("li:gt(20)"));
if(new_list.find("li").length > 20){
split_list(new_list);
}
}
}
ЛЭ: Я думаю, что его можно дополнительно уточнить, предварительно определив, сколько новых списков будет создано, создать эти списки и переместить блоки по ~ 20 li в новые созданные списки, поэтому они будут перемещены только один раз.
функция:
$.fn.splitUp=function(splitBy,wrapper) {
$all= $(this).find('>*');
var fragment=Math.ceil($all.length/splitBy);
for(i=0; i< fragment; i++)
$all.slice(splitBy*i,splitBy*(i+1)).wrapAll(wrapper);
return $(this);
}
использование:
$('ul#slides').splitUp(4,'<li class=splitUp><ul>')
или:
$('div#slides').splitUp(3,'<div/>')