我试图通过找到列表的中间点并添加将无序列表分成两列</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() 会反转标签的顺序。谢谢
您不能将 DOM 修改视为编辑原始 HTML 文件。一旦浏览器解析了 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 http://api.jquery.com/gt-selector), detach http://api.jquery.com/detach他们从当前ul, wrap http://api.jquery.com/wrapAll他们在一个新的ul，选择那个ul with parent http://api.jquery.com/parent and insert之后 http://api.jquery.com/insertAfter当前的ul (this)."
工作 jsFiddle http://jsfiddle.net/S39zW/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
