logo标签列表

使用 jQuery 克隆现有的 div。

javascriptphpjqueryhtml
6
我有一个问题。如何使用jQuery克隆一个现有的div？

[图片]1

<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。

我该如何解决这个问题？ [示例]2

是否可能？我只需要一个示例来解决我的问题。 谢谢你！<3

编辑：如果我克隆这些输入，我该如何更改这些输入的ID/class？

谷歌搜索怎么样？偶然发现了这个，它来自于官方的jQuery文档... - Romeo Sierra
可能是JQuery克隆<select>元素的重复问题。 - Romeo Sierra
如果我使用克隆，如何更改ID /类以创建动态输入？ - Juan Molina
https://codereview.stackexchange.com/questions/69295/better-way-of-clone-and-then-replace-some-attributes-with-jquery - Alive to die - Anant
@JuanMolina 当你调用 $("$elementId").clone() 时，你将得到一个元素的深拷贝，它是一个 jQuery 对象。你可以将其存储在变量中，并访问它的属性。 - Romeo Sierra
5个回答
4

嗨，请检查下面的代码：

<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>

2
需要一些规范，解释为什么操作员必须尝试您的代码以及您所做的更改以克服问题。 - Alive to die - Anant
3

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()

工作示例代码：

$('.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" );
});
#changedId{
 background:yellow;
}

#changedId1{
 font-size:20px;
 color:red;
}
<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>

1

.clone() 方法可以创建匹配元素集合的深层副本。而 .appendTo( ) 则用于将克隆的元素附加到指定元素中。

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

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

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

0
你可以轻松地做到以下几点。
<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 
});

这只是一个非常生疏的示例。请查看这个fiddle，以查看其实际效果。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接