Javascript - 克隆、附加和包装

Question

我有一些 javascripc 代码:

$(this).parent().siblings().find('.year-dropdown').find('.date, .time, .details').not('.clone').addClass('clone').clone().wrap("<div class='new'></div>").parent().appendTo('#all-events');

它的作用:此代码从特定的 div 中选择“.date、.time、.details”类，克隆它们，然后添加类 .clone，以防止再次克隆。接下来，此代码将选定的类包装到 ，最后添加到 #all-events 之前。

这段代码运行良好，只有一个问题:

所有类都添加到新的 div 中，类为 .new。

所以看起来像这样

<div class="new">
  <p class="date clone></p>
</div>
<div class="new">
  <p class="time clone></p>
</div>
<div class="new">
  <p class="details clone></p>
</div>

我想要的就是用 new 类关闭一个 div 中的这些类:

<div class="new">
  <p class="date clone></p>
  <p class="time clone></p>
  <p class="details clone></p>
</div>

这可能吗？

感谢您的建议。

PS:当前代码的输出，来自某个答案。

Answer 1

首先将 .new div 附加到 #all-events，然后将克隆的元素附加到附加的 .new div尝试:

$("<div class='new'></div>").appendTo('#all-events');
     $(this).parent().siblings().find('.year-dropdown').find('.date, .time, .details').not('.clone').addClass('clone').clone().appendTo('.new');

或 sd @billyonecan 建议使用 wrapAll()

$(this).parent().siblings().find('.year-dropdown').find('.date, .time, .details').not('.clone').addClass('clone').clone().wrapAll("<div class='new'></div>").parent().appendTo('#all-events');

分成4人一组

var items = $(this).parent().siblings().find('.year-dropdown').find('.date, .time, .details').not('.clone').addClass('clone').clone();

var final = '<div class="new">';
$(items).each(function(i,v){
   final+=v;
 if (i%4 == 0 ) {
    final+='</div><div class="new">'
 }
});
final+='</div>';
$(final).appendTo('#all-events');