在 jQuery 中的克隆后替换值

Question

我需要 clone() 并在之后更改 ID 值。

所以这是我的代码：

$('#add').click(function() {
  var newRow = $('.accordion').eq(0).clone();
  var newRow = newRow.html().replace('item1', 'item2')
  $('#list-items').append(newRow);
});

而 HTML 是：

<div id="add">Add row</div>
<form class="form-horizontal" id="list-items">
    <div class="panel-group accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="ui-tabs.html#item1">Item number 1</a>
                </h4>
            </div>
            <div id="item1" class="panel-collapse collapse">
                ...
            </div>
        </div>
    </div>
</form>

问题在于：此 href="ui-tabs.html#item1" 更改为 href="ui-tabs.html#item2" 但不是之后出现的。所以 id="item1" 不会更改为 id="item2".

有什么帮助吗？

Answer 1

你打错了......试试这个：

$('#add').click(function() {
    var newRow = $('.accordion').eq(0).clone();
    newRow = newRow.html().replace('item1', 'item2');
    $('#list-items').append(newRow);
});

Answer 2

更新自

var newRow = newRow.html().replace('item1', 'item2')

至

newRow = newRow.html().replace(/item1/g, "item2");

供参考 - http://plnkr.co/edit/4TK40ctShe585IjbVd1i?p=preview

Answer 3

也调整了HTML的代码，试试这个。

$('#add').click(function() {
    var newRow = $('.accordion').eq(0).clone();
    $('#list-items').append(newRow);
    $('#list-items span:last-child').attr("id",'item2');    //THIS ID SHOULD BE A DYNAMICALLY GENERATED THING.
});

HTML:

<div id="add">Add row</div>
<form class="form-horizontal" id="list-items">
    <div class="panel-group accordion">
        <div class="panel panel-default">
            <div id="item1" class="panel-collapse collapse">
                <span>  ...</span>  //ADDED A SPAN
            </div>
        </div>
    </div>
</form>

在 jQuery 中的克隆后替换值

Replace values after a clone in jQuery

jquery

replace

clone