0

Tengo el siguiente código, donde tengo un div id=padre y un div id=hijo

<div class="row p-0 m-0" id="padre">
  <div class="row col-12" id="hijo">
    <div class="col-md-4 pr-1">
        <div class="form-group">
            <?php echo $this->Form->control('masked_start_date', 
                                            ['name' => 'start_date', 
                                            'id' => 'datetimepickerstart', 
                                            'required'=>true,
                                            'class' => 'datetimepicker', 
                                            'placeholder' => $petsService->start_date,
                                            'value' => $petsService->start_date]); ?>
        </div>
    </div>
    <div class="col-md-4 pr-1">
        <div class="form-group">
            <?php echo $this->Form->control('masked_end_date', 
                                            ['name' => 'end_date',
                                            'required'=>true,
                                            'id' => 'datetimepickerend', 
                                            'class' => 'datetimepicker', 
                                            'placeholder' => $petsService->end_date,
                                            'value' => $petsService->end_date]); ?>
        </div>
    </div>               
    <div class="col-md-2 h-100">
        
        <div class="col-12 p-0 m-0">
            <div class="col-12 d-flex align-items-center justify-content-center">
                <label><?= __('Payed')?></label><br>    
            </div>
            <div class="col-12 d-flex align-items-center justify-content-center">
                <?php 
                echo $this->Form->control('confirmed',[
                                            'label' => '',
                                            'style' => 'transform: scale(1.5); height:40px;',
                                            'class' => 'pl-5'
                                        ]); 
                ?>
            </div>
        </div>
    </div>
    <div class="col-md-2 h-100 ">
      <div class="col-12 d-flex align-items-center justify-content-center">
          <label><?= __('More')?></label><br>    
      </div>
      <div id="btn-mas" class="col-12 d-flex align-items-center justify-content-center" style="height:50px;">
          <i class="fa fa-plus" onclick="agregar();"></i>  
      </div>
    </div>
  </div>
</div>

<script>
  function agregar(){
    $("#hijo").clone().appendTo("#padre");
  }
</script>

Funciona bien, ¡me realiza el clone! El problema es que al usar esta función o método se clona todo exactamente igual.
Necesito diferenciar los ID para poder manipularlos luego. La idea es poder diferenciar los nodos clonados que se crean al dar click en + y tratar esos datos obtenidos.

1
  • No se ve el id del que hablas. No sabemos si es un input, un div, o si ambas cosas una conteniendo a otra. o que es. ¿Podrias agregar el html correspondiente tanto a #padre como #hijo?
    – masterguru
    Commented el 9 feb. 2022 a las 18:44

1 respuesta 1

0

Inténtalo con esto:

var contadorHijos = 1;
function agregar() {
  let clonado = $("#hijo").clone()
  clonado.attr("id", "hijo_" + contadorHijos);
  contadorHijos++
  clonado.appendTo("#padre");
}

Tal como has solicitado en tus comentarios, ahora se crean con ids de forma secuencial.

Explicación:

Al quererlo de forma secuencial primero creamos una variable global denominada contadorHijos para que nos sirva de contador cada vez que ejecutemos la función agregar.

Dentro de la función asignamos a una variable local denominada clonado un clon del elemento con id hijo. Luego le cambiamos el atributo id asignándole el nombre hijo_ más un número que nos vendrá dado por la variable global contadorHijos. Después incrementamos el contador para que la siguiente vez que se invoque a la función agregar asigne otro número superior. Y finalmente lo agregamos al elemento con id padre.

9
  • coloque la estructura completa en cuestión, para tratar de aclarar un poco más la idea de lo que quiero hacer Commented el 9 feb. 2022 a las 19:13
  • Ya, bueno, mi respuesta sigue siendo válida si lo que quieres es cambiar #hijo por lo que sea, pero lo que veo es que se te van a duplicar los id datetimepickerendy datetimepickerend pero quizás no los uses para nada
    – masterguru
    Commented el 9 feb. 2022 a las 19:15
  • Los data datetimepickerend y datetimepickerend no funcionan por ahora al clonar, pero lo mas importante es diferenciar al clonar 2 o más veces los nodos hijos que se creen, ya que pueden ser más de 2 Commented el 9 feb. 2022 a las 19:18
  • Y que ids quieres que tengan? aleatorios? secuenciales? Aunque diria que da igual como se llamen los clonados, pues dudo que los uses para nada. Es recomendable usar distintos id para todo, eso es indudable, pero si te fijas tu siempre vas a clonar a hijo, por lo tanto si los otros se repiten da lo mismo a efectos prácticos (o si tienen nombres aleatorios tambien da igual cual sea). O quizas, en lugar de clonar el id del hijo, deberias clonar una clase llamada hijo o hijoPrincipal, y quitarla en los clonados con el mismo metodo.
    – masterguru
    Commented el 9 feb. 2022 a las 19:20
  • Si usas dos clases, mejor, en plan class="hijo hijoPrincipal" y en los clonados le quitas el .hijoPrincipal y podras referenciarlos siempre a todos como .hijo
    – masterguru
    Commented el 9 feb. 2022 a las 19:25

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.