在 jQuery 中，如果我有一个开始类和结束类，我如何用 div 包装多个元素

好的，这里有一些 html。我有一些开始和结束课程，但为此我只添加了每门课程 1 门。

<div id="DaySchedule_5amDetail">
    <span>&nbsp;</span>
</div>
<div id="DaySchedule_6amDetail">
    <span>&nbsp;</span>
</div>
<div id="DaySchedule_7amDetail" class="start"> <-- start
    <span>&nbsp;</span>
</div>
<div id="DaySchedule_8amDetail">
    <span>&nbsp;</span>
</div>
<div id="DaySchedule_9amDetail">
    <span>&nbsp;</span>
</div>
<div id="DaySchedule_10amDetail" class="end"> <-- end
    <span>&nbsp;</span>
</div>
<div id="DaySchedule_11amDetail">
    <span>&nbsp;</span>
</div>

我试图让 jquery 将元素从类开始到类结束包装在 div 中

我尝试了很多不同的事情并浏览了 stackoverflow。

$('div.start').each(function(){
   $(this).nextUntil('div.end').wrap(document.createElement('div'));
});

根据我的发现，这应该有效，但没有任何作用。它甚至没有创建一个div

$("div.start").wrapAll("<div>");

这仅在类开始的元素周围创建一个 div，我想将其扩展至类结束。

有没有明确的方法来做到这一点？我什至不应该使用wrap 或wrapAll 吗？有没有办法在具有特定类的元素之前注入开放的 div 标签，并在具有特定类（开始和结束）的元素之后添加结束标签。我尝试过前置和附加，但没有成功。

任何帮助将不胜感激。谢谢。

编辑： - - - - - - - - - - - - - - - - - - - - - - - - --------

所选的答案对我来说非常有用，只需进行一些小小的操作，所以这里是对我有用的代码：

  $('.start').each(function(){
    var $nextGroup = $(this).nextUntil('.end').add(this);
    $nextGroup.add($nextGroup.next()).wrapAll('<div class="draggableStuff">');
});

你非常接近......你确实想要wrapAll()但使用nextUntil()你有的概念。

$('.start').each(function(){
    $(this).nextUntil('.end').wrapAll('<div class="wrapper">');
});

DEMO http://jsfiddle.net/8ok2ecu6/

如果您还需要包装开始和结束使用add()添加开始和结束元素：

$('.start').each(function(){
     var $nextGroup= $(this).nextUntil('.end')
     $nextGroup.add(this).add($nextGroup.next()).wrapAll('<div class="wrapper">');
});

DEMO 2 http://jsfiddle.net/8ok2ecu6/1/