Jquery 使用 .append() 分割 HTML答案

【问题标题】：Jquery Splitting HTML with .append()Jquery 使用 .append() 分割 HTML
【发布时间】：2011-08-09 22:20:39
【问题描述】：

我想通过使用 jquery 插入结束标签来拆分列表。

这是原文：

<ul>
<li>one</l1>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>

我想把它变成：

<ul>
<li>one</l1>
<li>two</li>
</ul>
<ul>
<li>three</li>
<li>four</li>
</ul>

我无法使用 :nth-child(n) 或 .html() 或 .append() 完成此操作，但我想也许某种外部 html 替换可以做到这一点。也许有更简单的方法。有什么想法吗？

【问题讨论】：

您是否正在寻找一种方法来将包含 4 个项目的列表分成两个包含两个项目的列表。或者更通用的东西？
为什么要使用 jQuery 执行 basic 内容格式化？您意识到在没有 Javascript 的平台上浏览的任何人的体验都会下降吗？
jQuery split long ul list in smaller lists的可能重复
@Devin，你为什么要假设你更了解甚至知道发帖者的意图？也许他只是在试验 jQuery 并想学习。
我假设这会给不使用 Javascript 的人带来不好的体验。如果目的是学习，那很好。但是应该注意的是，这将是一项更好地应用于首先使标记正确的任务。

标签： javascript jquery

【解决方案1】：

$('li:nth-child(3), li:nth-child(4)').insertAfter('ul').wrapAll('')你不能“打破一个列表”。您可以 A）删除它并用两个列表替换它 B）提取一些元素以创建另一个列表。以下是可怕的可怕做法，但你又要问什么......

$('li:nth-child(3), li:nth-child(4)').insertAfter('ul').wrapAll('<ul />')

http://jsfiddle.net/aJWCs/

【讨论】：

我同意你关于这些限制的看法。您的解决方案基本上是正确的。

【解决方案2】：

如果你做如下，你可以检查对象的索引，如果是奇数/偶数/模数/etx就做一些事情

$('div').each(function(idx){
    console.log($(this));
    console.log(idx);
    console.log("");
});

注意 .each 开关，您可以将元素的 idx（索引）传递给它。所以.. 如果你的选择器选择了 4 个元素，你可以做任何你想做的数学运算。示例：

$('ul li').each(function(idx){
    if(idx%2==1){
        $(this).after('</ul><ul>');
    }    
});

这将在每个其他之后添加一个。

【讨论】：

这是我最初所做的，但一些浏览器实际上认为这是一个 html 错误并通过反转标签来修复它。不过谢谢你

【解决方案3】：

这工作JSFiddle

var items = $('ul li');
var list = $('ul');
var secondList = "<ul>";
if(items.length > 0) {
    var index = parseInt(items.length / 2)  ;
    for(var i=index; i<items.length; i++){
        secondList += "<li>" + items[i].innerHTML + "</li>";
        $(items[i]).remove();
    }
    secondList += "</ul>";
    $(secondList).insertAfter(list);
}

【讨论】：