Tengo que crear un nuevo div y mover el div existente al div recién creado.
Esta es mi estructura div actual
<div class="input-wrapper">some text1</div> <div class="input-wrapper">some text2</div> <div class="input-wrapper">some text3</div> <div class="input-wrapper">some text4</div> Quiero crear un nuevo div <div class="form-group"></div> y mover el div input-wrapper dentro. Así que la nueva estructura debería verse así.
<div class="form-group"><div class="input-wrapper">some text1</div></div> <div class="form-group"><div class="input-wrapper">some text2</div></div> <div class="form-group"><div class="input-wrapper">some text3</div></div> <div class="form-group"><div class="input-wrapper">some text4</div></div>He usado el siguiente script
function create_structure(){ $(".input-wrapper").append('<div class="form-group"></div>'); $(".form-group").appendTo(".input-wrapper"); }; window.setTimeout( create_structure, 2000 ); // 2 secondsNo estoy obteniendo la estructura deseada.
¿Algo que me falta en el código?
Cualquier sugerencia sera apreciada. Gracias por adelantado
¿Qué hay de usar el método de ajuste en wrap ?
for (let i = 0; i < $(".input-wrapper").length; i++) { $($(".input-wrapper")[i]).wrap("<div class='form-group'></div>"); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="input-wrapper">some text1</div> <div class="input-wrapper">some text2</div> <div class="input-wrapper">some text3</div> <div class="input-wrapper">some text4</div>Use el .each en JQuery:
$(".input-wrapper").each(function(i) { $(this).wrap("<div class='form-group'></div>"); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="input-wrapper">some text1</div> <div class="input-wrapper">some text2</div> <div class="input-wrapper">some text3</div> <div class="input-wrapper">some text4</div> para su segunda pregunta sobre agregar <span> , puede lograr esto modificando mi código para
$(".input-wrapper").each(function(i) { $(this).append("<span class='field-validation-valid'></span>"); $(this).wrap("<div class='form-group'></div>"); });