我正在克隆一个"模板"使用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并在将其附加到目标时保留更改?
答案 0 :(得分:3)
答案 1 :(得分:1)
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标记。
答案 2 :(得分:0)
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);