Question

我有一个问题。如何用jquery克隆现有的div？

<div class="modal-body">
    <div class="row">
        <div class="col-md-5 text-center">
            <b>N&uacute;mero Factura</b>
            <input type="number" class="form-control" id="numero"><br/>
        </div>
        <div class="col-md-2 text-center">
            -o-
        </div>
        <div class="col-md-5 text-center">
            <b>N&uacute;mero Remisi&oacute;n</b>
            <input type="number" class="form-control" id="remision"><br/>
        </div>
        <div class="col-md-12">
            <b>NIT:</b>
            <?php $consulta = mysqli_query($conexion, "SELECT * FROM proveedores");
            $resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
            <select class="form-control" id="proveedor">
                <?php foreach($resultado as $r): ?>
                <option value="<?php echo $r['nit']; ?>"><?php echo $r['nombre']; ?></option>
                <?php endforeach; ?>
            </select><br/>
        </div>
        <div class="col-md-2">
            <input type="number" class="form-control" id="productos" value="1">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-success agregar_producto" name="agregar_producto">
                <i class="fas fa-user-plus" style="color: white"></i>
            </button>
        </div>
    </div>
    <br/>
    <div id="contenido" class="row text-center">
        <div class="col-md-4">
            <b>Producto</b>
            <?php $consulta = mysqli_query($conexion, "SELECT * FROM productos");
            $resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
            <select class="form-control" id="producto">
                <?php foreach($resultado as $r): ?>
                <option value="<?php echo $r['id']; ?>"><?php echo $r['descripcion']; ?></option>
                <?php endforeach; ?>
            </select><br/>
        </div>
        <div class="col-md-4">
            <b>Cantidad</b>
            <input type="number" class="form-control" id="cantidad"><br/>
        </div>
        <div class="col-md-4">
            <b>Precio</b>
            <input type="number" class="form-control" id="precio"><br/>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-success crear" name="crear">Agregar Factura</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Regresar</button>
</div>

当有人按下class =“agregar_producto”按钮时，我需要克隆id =“contenido”的div。

我该如何解决？ [Example] 2

有可能吗？我只需要一个例子来解决我的问题。谢谢你！＆LT; 3

编辑：如果克隆输入如何将ids / class更改为此输入？

Answer 1

您好请检查以下代码：

<html>
      <head>
        <title>Sample HTML</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      </head>
      <body bgcolor=white>

         <div id="contenido" class="row text-center">
            <div class="col-md-4">
                <b>Producto</b>
                <select class="form-control" id="producto">
                
                    <option value="product1">product1</option>
                    <option value="product2">product2</option>
                    <option value="product3">product3</option>
                    <option value="product4">product4</option>
                    <option value="product5">product5</option>
                    <option value="product6">product6</option>
                    
                </select><br/>
            </div>
            <div class="col-md-4">
                <b>Cantidad</b>
                <input type="number" class="form-control" id="cantidad"><br/>
            </div>
            <div class="col-md-4">
                <b>Precio</b>
                <input type="number" class="form-control" id="precio"><br/>
            </div>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn agregar_producto" name="crear">Agregar Producto</button>
        
    </div>

    <script type="text/javascript">
    jQuery(document).ready(function ($) {
      $(".agregar_producto").on('click', function() {
      
        var $contenido  = $("#contenido:last");
        var $clone = $contenido.clone();
        $clone.find('input').val('');
        $contenido.after($clone);
      });
    });
    </script>
      </body>
    </html>

Answer 2

1. Id每个元素必须是唯一的，因此将id="contenido"转换为class="contenido"

2.使用.clone()

$('.agregar_producto').on('click', function(){
  var clone = $( ".contenido:first" ).clone();
  $(clone).attr('id','changedId'); //change cloned element id attribute
  $(clone).find('select').attr('id','changedId1'); //change cloned element children attribute also
  $(clone).insertAfter( ".contenido:last" );
});

注意： - 添加要在其后附加克隆的元素的选择器（类或ID）。

参考： -

.insertAfter()

工作代码段： -

＆＃13;

$('.agregar_producto').on('click', function(){
  var clone = $( ".contenido:first" ).clone();
  $(clone).attr('id','changedId'); //change cloned element id attribute
  $(clone).find('select').attr('id','changedId1'); //change cloned element children attribute also
  $(clone).insertAfter( ".contenido:last" );
});

＆＃13;

#changedId{
 background:yellow;
}

#changedId1{
 font-size:20px;
 color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
    <div class="row">
        <div class="col-md-5 text-center">
            <b>N&uacute;mero Factura</b>
            <input type="number" class="form-control" id="numero"><br/>
        </div>
        <div class="col-md-2 text-center">
            -o-
        </div>
        <div class="col-md-5 text-center">
            <b>N&uacute;mero Remisi&oacute;n</b>
            <input type="number" class="form-control" id="remision"><br/>
        </div>
        <div class="col-md-12">
            <b>NIT:</b>
            <?php $consulta = mysqli_query($conexion, "SELECT * FROM proveedores");
            $resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
            <select class="form-control" id="proveedor">
                <?php foreach($resultado as $r): ?>
                <option value="<?php echo $r['nit']; ?>"><?php echo $r['nombre']; ?></option>
                <?php endforeach; ?>
            </select><br/>
        </div>
        <div class="col-md-2">
            <input type="number" class="form-control" id="productos" value="1">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-success agregar_producto" name="agregar_producto">
                <i class="fas fa-user-plus" style="color: black">Click me to append Clone</i>
            </button>
        </div>
    </div>
    <br/>
    <div class="contenido" class="row text-center">
        <div class="col-md-4">
            <b>Producto</b>
            <select class="form-control" id="producto">
               
                <option value="1">1</option>
                <option value="1">2</option>
                <option value="1">3</option>
                <option value="1">4</option>
                <option value="1">5</option>
                
            </select><br/>
        </div>
        <div class="col-md-4">
            <b>Cantidad</b>
            <input type="number" class="form-control" id="cantidad"><br/>
        </div>
        <div class="col-md-4">
            <b>Precio</b>
            <input type="number" class="form-control" id="precio"><br/>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-success crear" name="crear">Agregar Factura</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Regresar</button>
</div>

＆＃13;

Answer 3

$('.agregar_producto').click(function(){
  $( "#contenido" ).clone().appendTo( "body" );
});

您可以更改上述内容，将克隆附加到特定元素下。

Answer 4

.clone()方法创建匹配元素集的深层副本。并.appendTo( )附加克隆元素。

$('.agregar_producto').on('click', function(){
  $( "#contenido" ).clone().appendTo( "body" );
});

Answer 5

您可以轻松执行以下操作。

<div id="div1">
  <p>
    Content in DIV1
  </p>
</div>
<div id="tgt">

</div>

jQuery片段如下。

$(document).ready(function(){
    var div1 = $("#div1").clone(); //Clone the element. Assigned to the JS variable div1
    div1.attr("id", "div1clone"); //Modify the necessary properties using $(element).attr()
    $("#tgt").append(div1); //Append the content to where ever desired 
});

这只是一个非常生疏的样本。检查this fiddle以查看此操作。

用Jquery克隆现有的div

5 个答案: