Question

我正在尝试在DOM中查找并克隆一个元素。克隆后，我想清除元素值，然后将它们附加在容器的底部。

由于某种原因，我似乎无法清除该值。当前，该行被追加，但具有与第一行相同的值。我要克隆对象，而忽略这些值。

如何修复以下代码以克隆除值以外的所有内容？

// replaces the index of each element to the giving index. so Title[0][name] will become Title[index][name]...
window.getContent = function (html, index) {
    return html.replace(/_\d+__/g, '_' + index + '__')
        .replace(/\[\d+\]/g, '[' + index + ']');
}

$(function(){

    $('#addRow').click(function(){

        // find the first row inside #container
        // clone it, find any input inside of it and set its value to empty string
        var template = $('#container .row').first().clone().find(':input').val('').end();

        // find the current count of the rows inside the container
        var index = $('#container .row').length;

        // replace the index inside the element name to the correct index
        var content = getContent(template.prop('outerHTML'), index);

        // append the new element on to the container
        $('#container').append(content);
    });
});

这是一个JS Fiddler，上面的代码正在起作用

Answer 1

尝试：

var template = $('#container .row').first().clone().find(':input').attr('value','').end();

应该为你做。

问题在于val不会处理default value属性，这就是为什么需要attr的原因。

查看working here

Answer 2

val()设置对象上元素的value属性。它不会更改value html属性。因此，当您获取externalHTML并更改html文本时，尚未保存值更改，因此在添加该html文本时将使用html属性值。

相反，只需修改元素本身的名称属性，而不是修改html文本。最后添加克隆的元素而不是html文本：

var template = $('#container .row').first().clone();
var index = $('#container .row').length;

template.find(":input").val('').each(function(){
  //modify the element's name property
  this.id = this.id.replace(/_\d+__/g, '_' + index + '__');
  this.name = this.name.replace(/\[\d+\]/g, '[' + index + ']');
});
$('#container').append(template);

演示

window.getContent = function(html, index) {
  return html.replace(/_\d+__/g, '_' + index + '__')
    .replace(/\[\d+\]/g, '[' + index + ']');
}

$(function() {

  $('#addRow').click(function() {
    var template = $('#container .row').first().clone();
    var index = $('#container .row').length;

    template.find(":input").each(function(){
      //might as well set value here since
      //we are looping anyway
      this.value = "";
      //modify the element's id property
      this.id = this.id.replace(/_\d+__/g, '_' + index + '__');

     //modify the element's name property
      this.name = this.name.replace(/\[\d+\]/g, '[' + index + ']');
    });
    $('#container').append(template);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="row">
    <input id="test_0__name" name="test[0][name]" value="test">
    <input id="test_0__game" name="test[0][game]" value="test 1">
    <input id="test_0__lame" name="test[0][lame]">
    <input id="test_0__fame" name="test[0][fame]" value="test 3">
    <input id="test_0__dame" name="test[0][dame]" value="test 4">
  </div>
</div>
<button id="addRow">Add</button>

如何使用jQuery重置克隆对象的值？

2 个答案: