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

我正在用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...?

这里有一个小把戏让它更清楚：（检查元素，查看

数据id

是否保持不变）

---

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

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

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

---

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

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

HTML

data-

（数据集）不等于jQuery的

$（）。data

。请注意，当您检查chrome中的克隆元素时：（$0=所选元素）

因此，它们是独立的实体，可能会变得相当混乱。你应该尽量不要把它们混在一起

顺便说一句，您可以使用

$（el）.attr（'data-id'，id）

或

$（el）[0]设置HTML标记。dataset.id=id

HTML

数据-

（dataset）不等于jQuery的

$（）。data

。请注意，当您检查chrome中的克隆元素时：（$0=所选元素）

<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>

因此，它们是独立的实体，可能会变得相当混乱。你应该尽量不要把它们混在一起

顺便说一句，您可以使用

$（el）.attr（'data-id'，id）

或

$（el）[0].dataset.id=id

设置HTML标记

<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>

3） 更改并添加到clonedElement：

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

4） 将clonedElement追加到表单：

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

最美好的祝福 3） 更改并添加到clonedElement：

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

4） 将clonedElement追加到表单：

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

最美好的祝福

---

经过FF和Chrome测试，似乎效果不错。@elclanrs你确定吗？您的

数据id

已更改？您检查过元素了吗？没有，但是

数据

属性与jQuery的

数据

不同。jQuery使用自己的存储。@Alexandreiffjanini:

.data（）

完全在jQuery内部，唯一的例外是为了方便起见，它是从

数据-

属性预填充的。所以，你期望它反映在HTML中是错误的。在FF和Chrome中进行测试，似乎效果很好。@Elclans你确定吗？您的

数据id

已更改？您检查过元素了吗？没有，但是

数据

属性与jQuery的

数据

不同。jQuery使用自己的存储。@Alexandreiffjanini:

.data（）

完全在jQuery内部，唯一的例外是为了方便起见，它是从

数据-

属性预填充的。因此，您期望它在HTML中反映是错误的。它似乎不仅适合您，而且是正确的解决方案。谢谢。我不知道

数据
是jQuery内部的。这很有效。我会在允许的情况下尽快接受答案。作为参考，我发现
end（）
在克隆和追加时也非常方便，正如这个答案中所述，它
将链接JQuery语句的“范围”回退到上一级
——因此您可以对克隆元素的各个“级别”进行更改。这不仅对你有效，而且是正确的解决方案。谢谢。我不知道
数据
是jQuery内部的。这很有效。我会在允许的情况下尽快接受答案。作为参考，我发现
end（）
在克隆和追加时也非常方便，正如这个答案中所述，它
将链接JQuery语句的“范围”回退到上一级
——因此您可以对克隆元素的各个“级别”进行更改。
                     -----------