3

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">');
});
Hooked
  • 84,485
  • 43
  • 192
  • 261
floor
  • 1,519
  • 11
  • 24

1 Answers1

4

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

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Your demo shows it works but when I use that code it doesn't create the div. I will upvote but this answers hasnt solved my problem. – floor Sep 12 '14 at 19:13
  • it definitely creates the div, that is where the green border comes from in demo. Inspect the live html in browser console, will see it – charlietfl Sep 12 '14 at 19:14
  • Yea I agree with you in your demo everything works but it isnt working for me on my version (not the demo). I inspect and there is no div being created. Do you know a way of debugging this behaviour so I can see why it isnt being created? – floor Sep 12 '14 at 19:20
  • are the elements being added by ajax? or Did you wrap code in ready handler? – charlietfl Sep 12 '14 at 19:21
  • would be fairly trivial to do this in php also – charlietfl Sep 12 '14 at 19:25
  • I inherited the code so I gotta work with what I got – floor Sep 12 '14 at 19:39