使用.after()添加html结束和打开标签

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>

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

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

<ul></ul>

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

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

</ul>

如果有更好的方法,请告诉我,但我真的想知道为什么.after()正在颠倒标签的顺序.谢谢

Answer 1

您无法考虑DOM修改,就像编辑原始HTML文件一样.一旦浏览器解析了HTML文件,就不再存在所有意图和目的.唯一重要的是DOM表示.

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

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

您正在想象这会编辑HTML,并添加一个结束标记和一个开始标记.它没有.它从该代码构建文档片段,然后将其添加为原始选择中元素的兄弟.由于</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和insert之后的电流ul(this)."

工作jsFiddle