1

我正在使用 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 个元素怎么办？

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

4

2 回答 2

0

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

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 元素时非常有用（并且可能更有效率）。

于 2013-10-31T07:19:41.620 回答
0 
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++;
});

小提琴

于 2013-10-31T07:22:36.637 回答