复制div，更改并输出到视图

Question

我现在有点负担过重。我想复制带有 .recipe-options-line 类的最后一个 div，并将其粘贴到带有 .recipe-options-line 类的最后一个 div 后面。到目前为止有效。

在插入 div 之前，我必须对元素进行一些更改。我该怎么做？

1. 我想删除文本区域中复制的元素中存在的所有条目。
2. 我想用变量 RecipeOptionNumber 的内容替换复制的元素中文本区域 (name="recipeOptions[0][number]") 中的数字。
3. 我想在复制的元素中替换最后一个 div 中 data-limit-target="unique-10-1" 和 span id="unique-10-1" 的最后一个数字，内容为变量 RecipeOptionNumber 也是如此。

这可能吗？还是我必须寻找其他解决方案？有人可以帮我吗？

HTML：

        <div class="col-md-12" id="recipe-options-div">
            <div class="recipe-options-line">
                <div class="col-md-3">
                    <div class="fancy-form">
                        <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
                        <textarea class="hide" name="recipeOptions[0][number]" rows="1"></textarea>
                        <i class="fa fa-dot-circle-o"><!-- icon --></i>
                        <span class="maximum-limit"></span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="fancy-form">
                        <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
                        <textarea class="hide" name="recipeOptions[0][unit]" rows="1"></textarea>
                        <i class="fa fa-dot-circle-o"><!-- icon --></i>
                        <span class="maximum-limit"></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="fancy-form">
                        <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
                        <textarea class="hide" name="recipeOptions[0][name]" rows="1"></textarea>
                        <textarea  data-limit-target="unique-10-1" class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
                        <i class="fa fa-comment"><!-- icon --></i>
                        <span id="unique-10-1" class="maximum-limit"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-center mb-15">
            <a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption"><i class="glyphicon glyphicon-plus"></i>option</a>
        </div>

JS：

var RecipeOptionNumber = 2;
    $(document).on("click", "#addRecipeOption", function () {
        $(".recipe-options-line:last").clone().insertAfter("div.recipe-options-line:last");
        RecipeOptionNumber ++;
    });

Answer 1

这可能吗？还是我必须寻找其他解决方案？有人可以帮我吗？

是的，当然有可能！这里一个好的解决方案是为配方选项创建一个空白模板和一个可重用的函数以编程方式添加它们。请参见下面的 cmets 示例：

$(function() {
    var recipeOptionsDiv   = $("#recipe-options-div");
    var RecipeOptionNumber = 0;

    // Re-usable function to add recipe options
    function addRecipeOption() {
        // A blank recipe <div>
        var newRecipe = $("#recipe-template-wrapper .recipe-options-line").clone();

        // Iterate through each [data-recipe] element and set its [name] attribute accordingly
        newRecipe.find("[data-recipe]").each(function() {
            var recipeOption = $(this).attr("data-recipe");

            $(this).attr("name", "recipeOptions[" + RecipeOptionNumber + "][" + recipeOption + "]");
        });

        // Set [data-limit-target] to RecipeOptionNumber + 1
        newRecipe.find("[data-limit-target]").attr("data-limit-target", "unique-10-" + (RecipeOptionNumber + 1));

        // Insert the new HTML
        recipeOptionsDiv.append(newRecipe);

        // Increment recipe counter
        RecipeOptionNumber++;
    }

    // Add click event listener for Add Option button
    $("#addRecipeOption").click(addRecipeOption);

    // Add the first recipe option on page load
    addRecipeOption();
});

#addRecipeOption {
    background-color: tomato;
    cursor: pointer;
    display: table;
    margin-bottom: 5px;
    margin-top: 10px;
    min-width: 100px;
    padding: 10px;
    text-align: center;
}
#recipe-template-wrapper {
    display: none;
}
.recipe-options-line {
    border-bottom: 1px solid;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

<!-- Add option button -->
<div class="text-center mb-15">
    <a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption">
        <i class="glyphicon glyphicon-plus"></i>option
    </a>
</div>

<!-- Recipe option divs will be appended here -->
<div class="col-md-12" id="recipe-options-div"></div>

<!--
    Hidden recipe option template HTML
    Elements' custom data-* attributes will be used to set their name attributes
-->
<div id="recipe-template-wrapper">
    <div class="recipe-options-line">
        <div class="col-md-3">
            <div class="fancy-form">
                <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
                <textarea class="hide" data-recipe="number" rows="1"></textarea>
                <i class="fa fa-dot-circle-o">
                    <!-- icon -->
                </i>
                <span class="maximum-limit"></span>
            </div>
        </div>
        <div class="col-md-3">
            <div class="fancy-form">
                <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
                <textarea class="hide" data-recipe="unit" rows="1"></textarea>
                <i class="fa fa-dot-circle-o">
                    <!-- icon -->
                </i>
                <span class="maximum-limit"></span>
            </div>
        </div>
        <div class="col-md-6">
            <div class="fancy-form">
                <div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
                <textarea class="hide" data-recipe="name" rows="1"></textarea>
                <textarea data-limit-target class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
                <i class="fa fa-comment">
                    <!-- icon -->
                </i>
                <span id="unique-10-1" class="maximum-limit"></span>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

嗯，你误解了记忆的概念。

当您克隆项目时。在插入之前对其进行更改

示例。

    $("button").click(function(){
    var inputCloned = $("input").last().clone();
    // make changes
    inputCloned.val("input nr " + $("input").length)

    // add the cloned input to the body
    $("body").append(inputCloned)

    })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <button>Clone last item</button>

    <input type="text" />