Question

我有以下HTML：

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

以及以下jQuery代码：

$('> ul li', body).each(function()
{
  $('</ul><ul>').insertBefore($(this));
});

此代码应插入一个结束标记，后跟每个列表项前面的无序列表的开始标记，但它会插入<ul></ul>。这些都是错误的方法！为什么jQuery会这样做，有没有人知道如何解决这个问题？

Answer 1

将li中的每个ul换行并移除原始外ul

<击> $（'ul li'）。wrap（''）。end（）。find（'ul'）。unwrap（'ul'）;

最终的HTML：

<body>
  <ul><li></li></ul>
  <ul><li></li></ul>
  <ul><li></li></ul>
</body>

在提示重新思考一下后，更简单应该有效：

$('ul').find('li').wrap('<ul/>').parent('ul').unwrap();

Answer 2

jQuery将始终修复无效的HTML。

 $('</ul><ul>')

这是无效的。您无法使用结束标记启动HTML。把这个字符串想象成一个小小的HTML文档。它必须是有效的。

我对你要做的事感到有点困惑？你想改变吗？

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

进入这个？

<ul><li></li></ul>
<ul><li></li></ul>
<ul><li></li></ul>

如果是这样，那么可能是这样的。

var list = $('> ul', body);
var x = $('<div>');
$('li', list).each(function(){
    x.append($('<ul>').append($(this)));
});
list.html(x);

Answer 3

jQuery不是要在某处插入HTML标记。它是关于操纵DOM - 为此，$('</ul><ul>')将以某种方式被解析为一个元素，然后插入到此前（this）。由于</ul><ul>是无效标记，因此您的浏览器在尝试解析时会发挥最佳效果，然后会出现<ul/>，然后将其插入到您的文档中。