使用 .after() 添加 html 关闭和打开标签答案

【问题标题】：Using .after() to add html closing and open tags使用 .after() 添加 html 关闭和打开标签
【发布时间】：2012-01-02 23:40:16
【问题描述】：

我试图通过找到列表的中点并在 </li> 之后添加 </ul><ul> 来将无序列表拆分为两列。这可能是完全错误的方法，但这是我的想法。我的 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() 会颠倒标签的顺序。谢谢

【问题讨论】：

标签： javascript jquery html jquery-after

【解决方案1】：

您不能像编辑原始 HTML 文件一样考虑 DOM 修改。一旦浏览器解析了 HTML 文件，出于所有意图和目的它不再存在。唯一重要的是 DOM 表示。

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

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

您正在想象编辑呈现的 HTML 并添加结束标记和开始标记。它没有。它从该代码构建文档片段，然后将其添加为原始选择中元素的 sibling。由于</ul> 不是 HTML 字符串的有效开头，因此将其删除。你剩下的就是<ul>，它被解析为一个完整的元素（想象一个HTML文档去<div><ul></div>，你会明白的）。因此，一个空的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 和@ 987654325@ 当前的ul (this)。”

Working jsFiddle

【讨论】：

【解决方案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+')'));

});

【讨论】：