Javascript 克隆并更改classname+；1和字段名称

我试图弄清楚如何克隆这个div，以便克隆的版本将product 2作为其类名，并将输入NAM设置为rate2和notes2

<div class="product1">   
    <input id="rate1" name="rate1" type="number">
    <input name="notes" type="text">
<div>

---

谢谢你的帮助

我建议您使用

product-1、product-2等

作为您的ID，也可以使用

product

作为您的类名。通过这样做，您可以得出如下结论：

$("#addproduct").click(function(){
    var temp = $(".product").last().prop('id').split("-");
    $(".product").last().clone().appendTo("body");
    var result = parseInt(temp[1]) + 1;
    //assume this last product is the one that already added
    $(".product").last().prop("id", "product-"+result); 

});

$(document).ready(function(){

    // the counter:
    var productID = 1;

    // the click handler:
    $("#addproduct").click(function() {

        // clone last added product:
        var nextProduct = $(".product" + productID).clone();

        // add corresponding classes (remove old first):
        nextProduct
          .removeClass('product' + productID)
          .addClass('product' + (++productID));

        // update id and name to the first input:
        nextProduct.find('input').eq(0).attr({
            id: 'rate' + productID,
            name: 'rate' + productID
        });

        // update name of the second input
        nextProduct.find('input').eq(1).attr('name', 'notes' + productID);

        // append to the body:
        $('body').append(nextProduct);
    });
});

另一种方式：

$("#addproduct").click(function(){
    var temp = $(".product").last().prop('id').split("-");
    var result = parseInt(temp[1]) + 1;
    var html = $(".product:nth-child(1)").html();
    $(".product").last().after('<div id="product-'+result+'" class="product">'+html+'</div>');
});

$（“#添加产品”）。单击（函数（）{
var temp=$（“.product”）.last（）.prop（'id'）.split（“-”）；
var结果=parseInt（temp[1]）+1；
var html=$（“.product:nth child（1）”）.html（）；
$（“.product”）.last（）之后（“”+html+“”）；
});

为了简单起见，为什么不试着保留一个计数器，并在每次添加新行（产品）时递增它呢。大概是这样的：

$("#addproduct").click(function(){
    var temp = $(".product").last().prop('id').split("-");
    $(".product").last().clone().appendTo("body");
    var result = parseInt(temp[1]) + 1;
    //assume this last product is the one that already added
    $(".product").last().prop("id", "product-"+result); 

});

$(document).ready(function(){

    // the counter:
    var productID = 1;

    // the click handler:
    $("#addproduct").click(function() {

        // clone last added product:
        var nextProduct = $(".product" + productID).clone();

        // add corresponding classes (remove old first):
        nextProduct
          .removeClass('product' + productID)
          .addClass('product' + (++productID));

        // update id and name to the first input:
        nextProduct.find('input').eq(0).attr({
            id: 'rate' + productID,
            name: 'rate' + productID
        });

        // update name of the second input
        nextProduct.find('input').eq(1).attr('name', 'notes' + productID);

        // append to the body:
        $('body').append(nextProduct);
    });
});

虽然我建议在两个输入中添加一些标识符（例如，不同的类名），这样就可以避免使用

.eq（）

现场演示：

希望这有帮助！
编辑、更新（v3）

试一试

html（将
1
添加到属性
name
的末尾，即用
notes1
替换
notes
）

JSFIDLE
我建议不要使用这种模式。在类名或ID中使用索引很快就会成为维护的难题。相反，使用一个公共类并遍历DOM以找到所需的元素。谢谢，我正在尝试实现这一点，并查找每个jquery函数的功能。谢谢！live demo真的很有帮助，Combinged和其他答案我想我现在可以理解了谢谢，我使用了这个，只是添加了一个计数器而不是2，这样它可以工作多个。带计数器的旧版本似乎工作正常，添加了两个以上的产品字段后，即使在第3个和第4个字段，它们仍然保留在注释2等处…但是它确实改变了下拉选项b的值y错误
var clone=$（'#product-1'）.clone（false）[0]。outerHTML.replace（/1/g，计数器）；
正则表达式也会更改“选择”菜单中我的产品的值，有没有办法只更改标签中的1。活性成分1？@vinnie667 jsiddle？@vinnie667不确定上面描述的内容？如果可能，可以创建/分叉jsiddle（带注释？）以查看？谢谢
<input name="notes1" type="text" />

$(document).ready(function () {    
    $("#addproduct").on("click", function () {
        var clone = $("[class^=product]:last")
        .clone(false, false)[0].outerHTML.replace(/(\d)/g, function(a) {
          return parseInt(a) + 1
        });       
        $(clone).appendTo("body");
        // console.log($(clone).attr("class"));
    });
});