Tengo varias secciones con la estructura similar:
<div class="padre">
<div class="icon heading-section"></div>
<div class="title heading-section"></div>
<div class="description"></div>
</div>
<div class="padre">
<div class="icon heading-section"></div>
<div class="title heading-section"></div>
<div class="description"></div>
</div>
<div class="padre">
<div class="icon heading-section"></div>
<div class="title heading-section"></div>
<div class="description"></div>
</div>
Lo que necesito es tener esta estructura en cada una de las secciones:
<div class="padre">
<div class="wrapper d-flex"> //Agregar este div en cada sección
<div class="icon heading-section"></div>
<div class="title heading-section"></div>
</div>
<div class="description"></div>
</div>
Intenté usando wrapAll de jquery de esta forma:
$('.solution-heading').wrapAll("<div class='wrapper d-flex' />");
pero lo que hizo fue encerrar todos los div que tienen la clase solution-heading en la misma seccion por lo que tuve:
<div class="padre">
<div class="wrapper d-flex"> //Se unieron todos los div **.icon/.title**
<div class="icon heading-section"></div>
<div class="title heading-section"></div>
<div class="icon heading-section"></div>
<div class="title heading-section"></div>
<div class="icon heading-section"></div>
<div class="title heading-section"></div>
</div>
<div class="description"></div>
</div>
Cómo puedo resolverlo?