jquery clone仅将类添加到克隆元素

Question

我有一个简单的函数，它克隆一个元素并用值填充它：

// Simple function to fadeIn a preview-text as soon as all inputs are triggered
function checkShowPreviewOrder() {
    $('.clonable').hide();
    $('.menge').each(function(i, val) {
            // check if the input is validate
            var currentVal = $(this).val();
            if(currentVal > 0 && isNumeric(currentVal)) {

                // clone the cloneable object for each valid number
                $('.cloneable').clone().appendTo(".summaryList").addClass("cloned"+i).show();

                // fill in initial values               
                $('.cloned'+i+' .preview_menge_einheit').html(currentVal);
                $('.cloned'+i+' .preview_artikel_name').html($(this).closest("tr").find(".item_name").text());
                $('.cloned'+i+' .preview_price_unit').html($(this).closest("tr").find(".price_ve").text());
                $('.cloned'+i+' .preview_einheiten').html(currentVal * $(this).closest("tr").find(".item_amount_unit").text());
            }
    });

    $('.previewtext').fadeIn();
}

这是我的div，应附加文本

<div class="alert alert-warning">
    <strong>Bitte überprüfen ob folgende Angaben korrekt sind:</strong><br><br>
    Sie bestellen folgende Artikel:
    <div class="summaryList">

    </div>
    <br>
    <hr>
    Der finale Preis beläuft sich auf <span class="preview_preis"></span>€
</div>

在最底层，我有我应该克隆的骨架：

<!-- HTML Template to copy from -->
<div class="cloneable" style="display: none;">
    <span class="preview_menge_einheit"></span>
    <span class="preview_artikel_name"></span>
    <span>zu je</span>
    <span class="preview_price_unit"></span>€ pro VE.
    <br>
    Dies entspricht einer Gesamtanzahl von <span class="preview_einheiten">
</span> Stück.
</div> 

我想要实现的目标是：我有n个输入字段。对于每个输入字段，我希望得到一个包含项目（价格，数量......）的小摘要，以便最后进行快速概述。我的表看起来像这样（以防你需要它可视化）

我知道在“clonable”中添加一个类 - 对象是错误的，但我不知道如何只访问克隆对象并保持原始状态不变。 现在，我的dom就这样结束了（填充了3个输入）：

所以我最终得到了7个（而不是3个）副本

Answer 1

而不是克隆clonable而只是创建一个虚拟变量，它将保存clonable的内容。

所以，而不是跟随，

$('.cloneable').clone().appendTo(".summaryList").addClass("cloned"+i).show();

你可以试试这个，

var $clone = $("<div>" + $('.cloneable').html() + "</div>");
 $clone.appendTo(".summaryList").addClass("cloned"+i).show();

或

$('.cloneable').clone().appendTo(".summaryList").removeClass("cloneable").addClass("cloned"+i).show();