5

我试图通过找到列表的中点并</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() 会颠倒标签的顺序。谢谢

4

2 回答 2

9

您不能像编辑原始 HTML 文件一样考虑 DOM 修改。一旦浏览器解析了 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和它。”parentinsertulthis

工作的jsFiddle

于 2012-01-02T23:49:54.023 回答
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+')'));

});
于 2012-01-02T23:51:56.253 回答