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

问题描述 投票：0回答：2

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

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

  1. 我想删除复制的元素中存在的文本区域中的所有条目。
  2. 我想在复制的元素中用变量RecipeOptionNumber的内容替换文本区域中的数字（名称=“ recipeOptions [0] [number]”）。
  3. 我想在复制的元素中将data-limit-target =“ unique-10-1”的最后一个数字和最后一个div中的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 ++;
    });
javascript jquery html css clone
2个回答
0
投票

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

是的，当然可以！一个好的解决方案是为配方选项创建一个空白模板，并创建一个可重用的函数以编程方式添加它们。请参阅以下带有注释的示例：

$(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>
0
投票

嗯，您对概念记忆有误解。

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

实施例

    $("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" />
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.