0

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?

1 respuesta 1

1

Una forma de hacerlo es ir poniendo el wrapAll uno por uno por cada padre.

$('.padre').each(function(){
  $('.heading-section', this).wrapAll("<div class='wrapper d-flex' />");
});
console.log(document.querySelector("section").innerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<section>
<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>
</section>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.