Question

我的jquery有问题。经过多次测试，对我来说没有简单的解决方案。

我的CMS将此代码返回给我

<ul>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
</ul>

我希望在每个类之后添加=最后一个代码

</ul><ul>

以获取此代码

<ul>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
</ul><ul>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
</ul><ul>
   <li>text</li>
   <li>text</li>
   <li class="last">text</li>
</ul>

我尝试使用此代码的jquery

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

但无法附加此文字。我获得了

<ul></ul>

而不是

</ul><ul>

你能帮我解决一下我的问题。在此先感谢;）

Answer 1

你不能像这样拆分DOM节点，你必须添加一个新的<ul></ul>并将相关的子节点移到它上面。

在旁注中，您是否考虑过根本不拆分列表而是将.last装饰成分隔符（空白区域，这是我假设您要实现的目标）？< / p>

Answer 2

我现在没有时间编写代码，但我认为你可以使用“detach”：

http://api.jquery.com/detach/

分离li元素，然后将它们添加到新列表中，然后继续以这种方式构建列表。

Answer 3

试试这个（我假设这个ul在一些容器中说div。

var container = $("div");
var ul = $("<ul/>");
var lis = $("ul > li", container);
container.empty();
lis.each(function(){

   ul.append(this);
   if($(this).hasClass("last")){
     container.append(ul);
     ul = $("<ul/>");
   }
});
container.append(ul);

Answer 4

有点蛮力，但试试这个：

var newUL = [$('<ul></ul>')];    

$('ul.className li').each(function(i, el) {
   newUL[newUL.length - 1].append($(el));
   if($(el).hasClass('last')) {
      newUL.push($('<ul></ul>'));
   }
});

完成后，您可以通过以下方式获取新的HTML：

$('#ulParent').empty.append(newUL.join(''));

jquery添加封闭标记

4 个答案: