使用jQuery包装元素组

我有一个元素列表，我想用div从第一个元素开始对它们进行分组，然后以BREAK类结束，然后在BREAK类之后开始一个新的组。

所以下面的代码，

Test 0
 
Test 1
 
Break 0
 
Test 2
 
Test 3
 
Break 1
 
Test 4
 
Test 5
 
Test 6 

会成为，

 
 
 
Test 0
 
Test 1
 
Break 0
 
 
 
Test 2
 
Test 3
 
Break 1
 
 
 
Test 4
 
Test 5
 
Test 6
 
Add last break element
 
 
 

并在最后一组中附加一个div元素。

有任何想法吗？ 提前致谢。

Answer 1

我想你也可以做这样的事情：首先你在所有.test父容器中插入一个.break ，然后正确使用wrapAll方法换行组：

 $('.test').parent().append('
Break 2
'). find('.test + .break').each(function() { $(this).prevUntil('.break, .group').add(this).wrapAll('
'); }); 

 .group { padding: 3px; background: #BFECBE; margin-bottom: 2px; } 

  
 
Test 0
 
Test 1
 
Break 0
 
Test 2
 
Test 3
 
Break 1
 
Test 4
 
Test 5
 
Test 6
  

Answer 2

我可能会简单地说：使用您添加的容器循环遍历它们，每次看到break时添加一个新容器：

 var div; $("selector for the divs").each(function() { if (!div) { div = $("
").insertBefore(this); } div.append(this); if ($(this).hasClass("break")) { div = undefined; } }); if (div) { $("
last break
").addClass("break").appendTo(div); } 

示例（我添加了一个wrapper类，因此我们可以在添加时看到效果）：

 $("#go").click(function() { var div; $("#container > div").each(function() { if (!div) { div = $("
").addClass("wrapper").insertBefore(this); } div.append(this); if ($(this).hasClass("break")) { div = undefined; } }); if (div) { $("
last break
").addClass("break").appendTo(div); } }); 

 .test { color: blue; } .break { color: red; } .wrapper { border: 1px solid #aaa; } 

   
 
Test 0
 
Test 1
 
Break 0
 
Test 2
 
Test 3
 
Break 1
 
Test 4
 
Test 5
 
Test 6
  

Answer 3

这段代码工作正常，你也可以在这里查看小提琴和演示

 $("div.test").each(function() { if (!$(this).nextAll(".break").length) $(".test").last().after('
Add last break element
'); if (!$(this).parents(".group").length) $(this).add($(this).nextUntil('.break+.test').andSelf()).wrapAll('
'); }); 

 .group { background: red; margin: 10px; } 

  
Test 0
 
Test 1
 
Break 0
 
Test 2
 
Test 3
 
Break 1
 
Test 4
 
Test 5
 
Test 6