在jQuery中，如果我有一个开始和结束类，我如何使用div来包装多个元素 [英] In jQuery how can I wrap multiple elements with a div given that I have a start and end class

问题描述

好的，这里有一些html。我有几个开端和结束班，但为了这个，我只增加了1个。

 < div id = DaySchedule_5amDetail > 
< span>& nbsp;< / span> 
< / div> 
< div id =DaySchedule_6amDetail> 
< span>& nbsp;< / span> 
< / div> 
< div id =DaySchedule_7amDetailclass =start> <  - 开始
< span>& nbsp;< / span> 
< / div> 
< div id =DaySchedule_8amDetail> 
< span>& nbsp;< / span> 
< / div> 
< div id =DaySchedule_9amDetail> 
< span>& nbsp;< / span> 
< / div> 
< div id =DaySchedule_10amDetailclass =end> <  -  end 
< span>& nbsp;< / span> 
< / div> 
< div id =DaySchedule_11amDetail> 
< span>& nbsp;< / span> 
< / div> 
  

我正在尝试将jquery wrap元素从类开始到类结束于div

我已经尝试了很多不同的东西，并通过了stackoverflow。

  $（'div （'div'））; $ b $（this）.nextUntil（'div.end'）。wrap（document.createElement（'div'））; 
}）; 
  

从我发现的这个应该可以工作，但它什么都不做。它甚至不创建div

  $（div.start）。wrapAll（< div>） ; 
  

这样只会创建一个div，并且只能使用类的开始元素，我想将其扩展到类结束。 / p>

有没有一种明确的方法可以做到这一点？我应该甚至不打扰包装或wrapAll？有没有办法在具有某个类的元素之前注入开放的div标签，并在具有某个类的元素（开始和结束）之后添加结束标记。我试过preappend和追加没有运气。

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

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

选定的答案对我来说非常合适一些小的操作，所以这里是我工作的代码：
$ b $ $ p $ $（'。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>'）; 
}）; 
  

c> add（）添加开始和结束元素：

  $（'。start' ）.each（function（）{
 var $ nextGroup = $（this）.nextUntil（'。end'）
 $ nextGroup.add（this）.add（$ nextGroup.next（））。 wrapAll（'< div class =wrapper>'）; 
}）; 
  

DEMO 2

Okay so here is some html. I have a few start and end classes but for the sake of this I have only added 1 of each.

<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>

I am trying to have jquery wrap elements from class start to class end in a div

I have tried many different things and looked through stackoverflow.

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

This from what I have found should work but it does nothing. It doesn't even create a div

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

this creates a div around only the element with class start I want to extend it till class end.

Is there a clear way to do this? Should I not even bother with wrap or wrapAll? Is there a way to inject an open div tag before an element with a certain class and add a closing tag after an element with a certain class (start and end). I have tried preappend and append with no luck.

Any help would be greatly appreciated. Thank you.

Edit: --------------------------------------------------------

The selected answer pretty much worked for me with some little manipulation so here is the code that worked for me:

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

解决方案

You were pretty close.... you do want wrapAll() but using the nextUntil() concept you have.

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

DEMO

If you need to also wrap the start and end use add() to add the start and end elements:

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

DEMO 2

这篇关于在jQuery中，如果我有一个开始和结束类，我如何使用div来包装多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！