代码之家 › 专栏 › 技术社区 › Junior

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

jquery javascript

Junior · 技术社区 · 7 年前

我试图在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 使用上述代码

2 回复 | 直到 7 年前

Akrion 7 年前

尝试:

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

我应该为你做。

val 不会照顾孩子的 default value 为什么 attr 是需要的。

看到了吗 working here

Junior 7 年前

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

只需修改元素本身的name属性,而不是修改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>