Quiero agrupar el siguiente html:
<h2>Summarize the problem<h2> <h3>Include details about your goal<h3> <h3>Include details about your goal<h3> <h3>Include any error messages<h3> <h2>Describe What you have tries<h2> <h3>Show what you've tried and tell us what you found<h3> <h3>Lorem Ipsum LOL<h3> ...dentro
<div> <h2>Summarize the problem</h2> <h3>Include details about your goal</h3> <h3>Include details about your goal</h3> <h3>Include any error messages</h3> </div> <div> <h2>Describe What you have tries</h2> <h3>Show what you've tried and tell us what you found</h3> <h3>Lorem Ipsum LOL</h3> </div>Intenté recorrer todos los elementos, pero nunca funcionó. No estoy poniendo el código aquí porque descubrí que ni siquiera tiene sentido
Aquí hay una versión de trabajo.
$("h2").each(function() { const $this = $(this) const $h3 = $this.nextUntil("h2"); // find all tags until next H2 $this .wrap('<div class="wrapper" />') .after($h3) }) .wrapper { border: 1px solid black } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>Summarize the problem</h2> <h3>Include details about your goal</h3> <h3>Include details about your goal</h3> <h3>Include any error messages</h3> <h2>Describe what you have tried</h2> <h3>Show what you've tried and tell us what you found</h3> <h3>Lorem Ipsum LOL</h3>