具有许多锂原子的Jquery ul与剩余的锂物品分离成ul

时间:2010-02-18 13:39:31

标签: jquery

怎么了窥视..

假设我有一个带有30件物品的ul

<ul class="column">
  <li>portfolio items 1</li>
  <li>portfolio items 2</li>
  ...
  <li>portfolio items 29</li>
  <li>portfolio items 30</li>
</ul>

我需要jquery将10个项目中的li项目带入新的ul列,如果可能的话,从20个列到第3列

所以如果我的ul列表中有30个li项目,那么它只有10个并且与其余的li项目一起创建一个新的ul coumn。

我想要做的事情的例子就在我的投资组合中 http://www.missionandromeda.com

我基本上正在迁移到wordpress,我必须拥有1 ul以内的所有条目。如果我只有一列,但我的设计需要4 = /

,那将非常容易

谢谢! (;

1 个答案:

答案 0 :(得分:0)

试试这个。它假设需要动态创建新的UL。

更新:创建了一个分配该类的版本,并且根本不分配ID。

$('document').ready(function() {
  var i = 0;
  var $newUL;
  var $theColumn = $('.column');
  var length = $theColumn.children('li').length;
  while(length > 10) {
    $newUL = $('<ul class="' + $theColumn.attr('class') + '"></ul>');
    while(i < 10) {
        $theColumn.children('li').eq(10).appendTo($newUL)
        i++;
        length--;
    }
    $('body').append($newUL);
    i = 0;
  }
});

这是另一种方法。 (这次类名是硬编码的,虽然不需要):

$(document).ready(function() {  
    var $newUL;
    while($('.column:last').children('li').length > 10) {
        $newUL = $('<ul class="column"></ul>');
        $('.column:last').children('li').slice(10).appendTo($newUL);
        $newUL.appendTo('body');
    }
});