3

Estoy tratando de mover elementos a otra parte del DOM con jquery, si se logran mover pero como son elementos que se van a repetir dinamicamente, el contenido que le di appendTo se duplica en cada uno de los elementos. Como puedo evitar que se duplique??

$(".detalles .precio").appendTo($(".contenedor-precio-nivel"));
$(".detalles .nivel").appendTo($(".contenedor-precio-nivel"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="contenido">
  <div class="detalles">
    <div class="precio">$120.00</div>
    <div class="promedio">
      <div class="estrellas">
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
      </div>
      <span>5.0</span>
    </div>
    <div class="calificaciones"><span>(20,000)</span>
      <p>Calificaciones</p>
    </div>
    <div class="nivel">Nivel Avanzado</div>
    <div class="contenedor-precio-nivel"></div>
  </div>
</div>
<div class="contenido">
  <div class="detalles">
    <div class="precio">$20.00</div>
    <div class="promedio">
      <div class="estrellas">
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
      </div>
      <span>5.0</span>
    </div>
    <div class="calificaciones"><span>(20,000)</span>
      <p>Calificaciones</p>
    </div>
    <div class="nivel">Nivel Principiante</div>
    <div class="contenedor-precio-nivel"></div>
  </div>
</div>

Por ejemplo, tengo 3 divs padres que contienen a el contenedor del precio y el nivel, entonces al ejecutar ese código de arriba, se duplica 3 veces el precio y 3 veces el nivel, ¿cómo puedo evitar que se duplique?

4
  • Por favor, añade también el HTML para crear un ejemplo mínimo verificable en la propia pregunta y que podamos ver mejor el problema. Lee Cómo preguntar para más información.
    – Alvaro Montoro
    el 27 may. 2019 a las 1:09
  • Ya agregue el html el 27 may. 2019 a las 1:39
  • He duplicado la parte del HTML para que se vea el problema. Dime si ahora ya se ve el problema bien
    – Alvaro Montoro
    el 27 may. 2019 a las 1:45
  • Si me funciono, muchas gracias el 27 may. 2019 a las 2:04

1 respuesta 1

4

Esto ocurre porque cuando mueves los elementos no especificas dentro de qué padre se encuentra el .contenedor-precio-nivel de destino. Entonces se copia a todos los que existen, duplicándose el contenido en diferentes partes.

Una posible solución sería usar .each para seleccionar los elementos que se van a mover, y entonces puedes usar los selectores de ancestro dentro del appendTo. Algo como esto (formateado y comentado para que se vean las diferentes partes):

// para cada elemento con clase precio dentro de detalles
$(".detalles .precio").each(function(elemento) {
  // añadirlo al final del elemento...
  $(this).appendTo(
    // buscar el ancestro de precio con clase detalles 
    // y buscar dentro de ese, al que tenga la clase contenedor-precio-nivel
    $(this).closest(".detalles").find(".contenedor-precio-nivel")
  );
});

Aquí lo puedes ver funcionando:

$(".detalles .precio").each(function(elemento) {
  $(this).appendTo($(this).closest(".detalles").find(".contenedor-precio-nivel"));
});

$(".detalles .nivel").each(function(elemento) {
  $(this).appendTo($(this).closest(".detalles").find(".contenedor-precio-nivel"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="contenido">
  <div class="detalles">
    <div class="precio">$120.00</div>
    <div class="promedio">
      <div class="estrellas">
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
      </div>
      <span>5.0</span>
    </div>
    <div class="calificaciones"><span>(20,000)</span>
      <p>Calificaciones</p>
    </div>
    <div class="nivel">Nivel Avanzado</div>
    <div class="contenedor-precio-nivel"></div>
  </div>
</div>
<div class="contenido">
  <div class="detalles">
    <div class="precio">$20.00</div>
    <div class="promedio">
      <div class="estrellas">
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
        <i class="material-icons">star_rate</i>
      </div>
      <span>5.0</span>
    </div>
    <div class="calificaciones"><span>(20,000)</span>
      <p>Calificaciones</p>
    </div>
    <div class="nivel">Nivel Principiante</div>
    <div class="contenedor-precio-nivel"></div>
  </div>
</div>

1
  • Si funcionó, muchas gracias el 27 may. 2019 a las 2:05

Tu Respuesta

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

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