在追加之前更改克隆元素的属性

Question

我正在克隆一个＆＃34;模板＆＃34;使用jQuery进行DIV并将已修改的版本附加到另一个DIV。

问题是我对克隆所做的更改在我将其附加到目标时不会显示。

var $clone = $('div[data-id="5"]').clone();

console.log($clone.data('id')); // outputs '5'

$clone.data('id', 99);

console.log($clone.data('id')); // outputs '99'

$clone.appendTo($('#target')); // resulting cloned element has data-id of '5'! Whaa...?

这里有一个更清晰的小提琴：http://jsfiddle.net/ajanini/rcxd4v3b/1/（检查元素以查看data-id未更改）

问题是：我做错了什么？如何更改克隆的数据ID并在将其附加到目标时保留更改？

Answer 1

我使用此attr来设置属性。似乎对我有用。

$clone.attr("data-id",99);

http://jsfiddle.net/rcxd4v3b/2/

Answer 2

HTML data-（数据集）不等于jQuery的$().data。在chrome中检查克隆元素时请注意：（$ 0 = selected element）

$0.dataset.id   // 5
$($0).data('id') // 99

所以他们是独立的实体，它可能会让人很困惑。你应该尽量不要混合它们。

顺便说一句，您可以使用$(el).attr('data-id', id)或$(el)[0].dataset.id = id设置HTML标记。

Answer 3

a = np.array([1, 2, 3, 4, 5, 6, 7, 8, 9])
index = np.array([2, 3, 6]) #index is changed to an array.  
out = [val for i, val in enumerate(a) if all(i != index)]
>>> [1, 2, 5, 6, 8, 9]

上面的代码是 HTML表单的一部分，我想对其进行克隆，并在克隆后替换此 #addRow 按钮>，然后将其附加到表单：）...好！

这是我的代码：

<div class="row session-sub-to-clone" >
    <div class="col-md-5 col-xs-12">
        <div class="form-group custom-form-group">
            <label for="parties">المشاركون</label>
            <select class="form-control" id="parties" name="participant_user_id[]">
                <option value="">المشاركون</option>
                <option value="">المشاركون</option>
                <option value="">المشاركون</option>
                <option value="">المشاركون</option>
            
            </select>
        </div>
    </div>
    <div class="col-md-5 col-xs-12">
        <div class="form-group custom-form-group">
            <label for="parties-title">عنوان المشاركة</label>
            <input type="text" class="form-control" id="partise-title" name="participant_title[]" value="" required>
            <input type="hidden" value="0" name="participant_id[]">
        </div>
    </div>
    <div class="col-md-2 col-xs-12">
        <button type="button" class="btn add-partise-btn" id="addRow"><i
                    class="fa fa-plus"></i></button>
    </div>
</div>
<div id="new-rows"></div>

1）我要用 #addRow 按钮替换的HTML元素“ remove-btn”：

$("#addRow").click(function () {
    var html = '<div class="col-md-2 col-xs-12" style="margin-right: 37%;">'
    html += '<button type="button" class="btn remove-parties-btn" id="removeRow"><i class="fa fa-times"></i></button>'
    html += '</div>'

    var clonedElement = $('.session-sub-to-clone').clone();

    clonedElement.find('#addRow').replaceWith(html);
    clonedElement.attr('id','inputFormRow')
    $('#new-rows').append(clonedElement);
});

// remove row
$(document).on('click', '#removeRow', function () {
    console.log('test');
    $(this).closest('#inputFormRow').remove();
});

2）元素克隆：

var html = '<div class="col-md-2 col-xs-12" style="margin-right: 37%;">'
html += '<button type="button" class="btn remove-partic-btn" id="removeRow"><i class="fa fa-times"></i></button>'
html += '</div>'

3）更改并添加到clonedElement：

var clonedElement = $('.session-sub-to-clone').clone();

4）将cloneedElement附加到表单：

clonedElement.find('#addRow').replaceWith(html);
clonedElement.attr('id','inputFormRow');

最良好的祝愿

$('#new-rows').append(clonedElement);