Question

我正在尝试将包含八个项目的无序列表分成两个列表，每个列表包含四个项目。

我认为在第四个列表项之后.insert关闭和打开标记会将其删除：

if(i == 3) {
  $(li).insert({
    after: "</ul><ul>"
  });
}

但Prototype以相反的顺序给我<ul></ul>。

<ul>
  <li />
  <li />
  <li />
  <li />
<ul></ul>
  <li />
  <li />
  <li />
  <li />
</ul>

这个问题有一个简单的答案吗？

Answer 1

以下是我将如何做到这一点

HTML：

<div id="list">
        <ul id="original">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>

使用Javascript：

var ul = new Element('ul');
$$('#original li').each(function(li, index) {
    if (index % 3 == 0 && index > 0) {
        $('list').insert({
            bottom: ul
        });
        ul = new Element('ul');
    }
    ul.insert({
        bottom: li
    });

});
$('list').insert({
    bottom: ul
});
$('original').remove();

查看实时example

Answer 2

它不像那样。

创建新的UL，并将项目移动到该列表：

function moveToOtherList(item){
    var myList = item.up('ul');
    var next = myList.next('ul');
    if(!next){
        next = new Element('ul',{style:"margin-top:20px;"});
        myList.insert({after:next});
    }
    next.insert({bottom:item});
}

$$('ul li').each(function(item, index){
    if(index > 3){
        moveToOtherList(item);
    }
});

有关工作示例，请参阅this jsfiddle

Answer 3

使用JavaScript MOD运算符查看您在第一行或第四行的时间。如果是，请创建UL元素，然后将LIst添加到此元素。

类似的东西：

if ( i % 4 == 0 ) {
  currentUl = new Element('ul');
  $('li').appendChild(currentUl);
}

Answer 4

我不知道Prototype，但在Jquery你可以尝试这个http://jsfiddle.net/nxapS/7/

原型插入后

4 个答案: