Quiero intercambiar 2 divs usando jquery pero cuando traté de intercambiarlo usando insertAfter() se inserta dos veces. Solo quiero especificar que cada elemento principal solo necesita intercambiar los divs una vez.
Entonces, en cada elemento principal wcmsd-step-container , necesito insertar la wcmsd-checkbox-item-description debajo de la clase wcmsd-step-title . Pero se duplica dos veces al cambiarlo.
¿Alguien puede señalar cuál es la función correcta para usar en mi código jQuery?
jQuery(document).ready(function() { jQuery('.wcmsd-step-container').each(function() { jQuery('.wcmsd-checkbox-item-description').insertAfter(jQuery('.wcmsd-step-title')); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--Step 1--> <div class="wcmsd-step-container"> <h2 class="wcmsd-step-title">What type of photo do you want?</h2> <div class="wcmsd-step-content"> <label class="wcmsd-checkbox-item-title">choose your photo</label> <p class="wcmsd-checkbox-item-description">Select up to 122. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p> </div> </div> <!--Step 2--> <div class="wcmsd-step-container"> <h2 class="wcmsd-step-title">What type of video do you want?</h2> <div class="wcmsd-step-content"> <label class="wcmsd-checkbox-item-title">choose your video</label> <p class="wcmsd-checkbox-item-description">Select up to 322. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p> </div> </div>Su código dentro del ciclo no tiene relación con el ciclo, por lo que es solo for (i=0;i<2;++i) con el código interno que dice "tome todas las descripciones y colóquelas todas después de cada título" - obtiene dos porque hay dos, si tuvieras 3, obtendrías 3 después de cada título.
Debe usar this dentro del ciclo para asegurarse de que los elementos correctos se muevan al lugar correcto.
$('.wcmsd-step-container').each(function() { $(this).find('.wcmsd-checkbox-item-description').insertAfter($(this).find('.wcmsd-step-title')); });Fragmento actualizado con un botón para ver antes/después
$("#btn").click(() => { $('.wcmsd-step-container').each(function() { $(this).find('.wcmsd-checkbox-item-description').insertAfter($(this).find('.wcmsd-step-title')); }); }); .wcmsd-step-content { background-color: yellow; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btn">click me</button> <!--Step 1--> <div class="wcmsd-step-container"> <h2 class="wcmsd-step-title">What type of photo do you want?</h2> <div class="wcmsd-step-content"> <label class="wcmsd-checkbox-item-title">choose your photo</label> <p class="wcmsd-checkbox-item-description">Select up to 122. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p> </div> </div> <!--Step 2--> <div class="wcmsd-step-container"> <h2 class="wcmsd-step-title">What type of video do you want?</h2> <div class="wcmsd-step-content"> <label class="wcmsd-checkbox-item-title">choose your video</label> <p class="wcmsd-checkbox-item-description">Select up to 322. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan faucibus proin nisi, risus vehicula. Fames metus, metus consectetur.</p> </div> </div>