javascriptjqueryhtmlwrapall

Wrap HTML with DIV until next H3

I have the following HTML structure:

$('#subgroup a').nextUntil('h3').wrapAll('<div></div>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="subgroup">
  <h3>Group name #1</h3>
  <a href="#">Link #1</a>
  <a href="#">Link #2</a>
  <h3>Group name #2</h3>
  <a href="#">Link #3</a>
  <a href="#">Link #4</a>
</div>

I have this flat structure because I want to use jQuery UI's accordion effect. I want to wrap all a elements between the h3 elements.

But this caused some of the a elements to disappear. I've tried quite a few selectors but none of them has worked. Am I doing this right?

Solution

  • An approach like this should work, though I'm guessing there are many different ways of doing this:

    $('#subgroup h3').each(function() {
    $(this).nextUntil('h3').wrapAll('<div></div>');
});