Wrap HTML from DIV to next H3

Question

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 such a flat structure because I want to use the jQuery UI accordion effect. I want to wrap all the elements between a h3 elements.

But this caused some a elements to disappear. I tried quite a few selectors, but none of them worked. Am I doing it right?

Answer 1

This approach should work, although I assume there are many different ways to do this:

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

Answer 2

Here's what it looks like after some nice (and dirty) jQuerying to remove HTML:

 <div id="subgr-productlist"> <h3>Serie 1000</h3> <a id="product-PROD79" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD79" name="product-PROD79">Model 1010</a> <a id="product-PROD80" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD80" name="product-PROD80">Model 1020</a> <a id="product-PROD81" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD81" name="product-PROD81">Model 1030</a> <a id="product-PROD82" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD82" name="product-PROD82">Model 1040</a> <a id="product-PROD83" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD83" name="product-PROD83">Model 1050</a> <h3>Serie 2000</h3> <a id="product-PROD234" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD234" name="product-PROD234">Model 2010</a> <h3>Serie 3000</h3> <a id="product-PROD85" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD85" name="product-PROD85">Model 3010</a> <h3>Serie 4000</h3> <a id="product-PROD86" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD86" name="product-PROD86">Model 4010</a> <a id="product-PROD87" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD87" name="product-PROD87">Model 4020</a> <a id="product-PROD88" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD88" name="product-PROD88">Model 4030</a> <a id="product-PROD89" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD89" name="product-PROD89">Model 4040</a> </div> 

In other words, all other elements of a disappear?

Then I run this jQuery script:

 $('#subgr-productlist h3').each(function(){ $(this).nextUntil('h3').wrapAll('<div class="test"></div>'); }); 

But this causes the #subgr-productlist div to look like this:

 <div id="subgr-productlist"> <h3>Serie 1000</h3> <h3>Serie 2000</h3> <h3>Serie 3000</h3> <div class="test"> <a id="product-PROD85" href="/global/hygiene/touchfree-dispensers/dispensers/products/products.aspx?ProductId=%20Model%203010" name="product-PROD85"></a> </div> <h3>Serie 4000</h3> </div>