Question

我正在尝试通过查找列表的中间点并在</ul><ul>之后添加</li>来将无序列表拆分为两列。这可能是完全错误的方式，但这是我想的方式。我的js看起来像这样：

$('.container ul').each(function(){

    var total = $(this).children().length;
    var half = Math.ceil(total / 2) - 1;
    $(this).children(':eq('+half+')').after('</ul><ul>');

});

我遇到的问题和我不明白的是.after（）正在颠倒标签和输出的顺序：

<ul>

<li><a href="#">link</a></li>

<ul></ul>

<li><a href="#">link</a></li>

</ul>

如果有更好的方法，请告诉我，但我真的想知道为什么.after（）正在颠倒标签的顺序。感谢

Answer 1

您无法将DOM修改视为编辑原始HTML文件。一旦浏览器解析了HTML文件，所有意图和目的就不再存在。唯一重要的是DOM表示。

考虑到这一点，让我们来看看你发布的代码......

.after('</ul><ul>')

您正在想象这会编辑HTML，并添加结束标记和开始标记。它没有。它从该代码构建文档片段，然后将其添加为原始选择中元素的兄弟。由于</ul>不是HTML字符串的有效开头，因此将其删除。您剩下的就是<ul>，它被整体解析为一个元素（想象一下<div><ul></div>的HTML文档，您就会明白这一点。因此，一个空的ul元素作为您选择的元素的兄弟插入到列表中：它表示为<ul></ul>，因为这是将ul元素序列化为HTML的方法。

要做你想做的事，你需要使用一种不同的方法，一种能识别DOM的方法。

$('.container ul').each(function(){
    var total = $(this).children().length;
    var half = Math.ceil(total / 2) - 1;
    $(this).children(':gt('+half+')').detach().wrapAll('<ul></ul>').parent().insertAfter(this);
});

这说“让孩子们在中途（:gt），detach将他们从当前的ul，wrap新的ul中选中，然后选择ul parent和insert it after当前ul（this）。{

Working jsFiddle

Answer 2

您无法向DOM添加半标记，只能添加完整元素。当您尝试时，浏览器最好更正代码，最后使用<ul></ul>代替</ul><ul>。（实际结果可能因浏览器而异，因为它们有不同的纠正错误代码的策略。）

相反，在第一个元素之后添加另一个ul元素，并将一半的项目移动到它：

$('.container ul').each(function(){

  var total = $(this).children().length;
  var half = Math.ceil(total / 2) - 1;
  $(this).after('<ul/>').append($(this).children(':gt('+half+')'));

});

使用.after（）添加html结束和打开标签

2 个答案: