在jQuery中,如果我有一个开始和结束类,我怎么能用div包装多个元素

时间:2014-09-12 18:53:43

标签: javascript jquery html wrapping

好的,这是一些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>

我试图在div

中从类start到class end获得jquery包装元素

我尝试了很多不同的东西,并查看了stackoverflow。

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

这一点从我发现的应该起作用但它什么也没做。它甚至没有创建div

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

这只创建了一个div,只有class start,我希望将它扩展到class end。

有明确的方法吗?我甚至不打扰包裹或wrapAll吗?有没有办法在具有特定类的元素之前注入一个开放的div标签,并在具有特定类(开始和结束)的元素之后添加一个结束标记。我试过preappend并附加没有运气。

非常感谢任何帮助。谢谢。

编辑:--------------------------------------------- -----------

选择的答案通过一些操作对我来说非常有用,所以这里的代码对我有用:

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

1 个答案:

答案 0 :(得分:4)

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

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

DEMO

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

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

DEMO 2