Question

我使用jquery克隆div，div有3个输入字段。由于clone不会更改元素的id和名称，因此我通过查找元素来更改它。我为每个元素都这样做。这是代码：

var idCounter = 1;
  var noOfClonedItems = 0;
  $('.container').on('click', '#add-new-sku', function(e){
    e.preventDefault();

    var clonedItem = $('.sku-data:first').clone();

    clonedItem.find('#product_skus_attributes_0_price').attr('name','product[skus_attributes][' + idCounter + '][price]').val('0.0');
    clonedItem.find('#product_skus_attributes_0_price').attr('id','product[skus_attributes][' + idCounter + '][price]');

    clonedItem.find('#product_skus_attributes_0_units_in_stock').attr('name','product[skus_attributes][' + idCounter + '][units_in_stock]').val('0');
    clonedItem.find('#product_skus_attributes_0_units_in_stock').attr('id','product[skus_attributes][' + idCounter + '][units_in_stock]');

    clonedItem.find('#product_skus_attributes_0_units_sold').attr('name','product[skus_attributes][' + idCounter + '][units_sold]').val('0');
    clonedItem.find('#product_skus_attributes_0_units_sold').attr('id','product[skus_attributes][' + idCounter + '][units_sold]');

    clonedItem.appendTo('.sku-container');
    idCounter++;
    noOfClonedItems++;
  });

但我正在尝试优化这种技术，如果有100个元素怎么办？

我正在弄清楚如何优化此代码以适用于任何元素。

Answer 1

您的代码看起来很合理 - 我要改变的是改变这些行：

clonedItem.find('#product_skus_attributes_0_price').attr('name','product[skus_attributes][' + idCounter + '][price]').val('0.0');
clonedItem.find('#product_skus_attributes_0_price').attr('id','product[skus_attributes][' + idCounter + '][price]');

这样的事情：

clonedItem.find('#product_skus_attributes_0_price')
.attr('name','product[skus_attributes][' + idCounter + '][price]');
.attr('id','product[skus_attributes][' + idCounter + '][price]')
.val('0.0');

其他方法（而不是克隆对象）是使用一些模板引擎，如http://embeddedjs.com/或http://mustache.github.io/，它们在动态创建dom元素时非常有用（并且可能更高效）。

Answer 2

var noOfClonedItems = 0;

$('.container').on('click', '#add-new-sku', function (e) {
    e.preventDefault();
    var clonedItem = $('.sku-data:first').clone();
    clonedItem.find('[id^="product_skus_attributes"]').prop('id', function(_,id) {
        var name = 'product[skus_attributes][' + (noOfClonedItems+1) + ']['+id.split(/\d\_/).pop()+']';
        this.name = name;
        this.value = name=='price'?'0.0':'0';
        return name;
    }).appendTo('.sku-container');
    noOfClonedItems++;
});

FIDDLE

这段代码可以重新考虑吗？

2 个答案: