Question

这应该是一个非常简单的问题。我有一个输入和一个按钮。我的目标是，当我单击该按钮时，将显示该输入元素的副本。我无法解决的是，当我单击按钮时，克隆的元素仅出现在原始元素之后，但它应该出现在所有克隆的元素的底部。

$(document).ready(function () {
    //addition buttons handler
    $(".btn-add").on("click", function () {
        var id = $(this).attr("id");
        var operation = id.split('-')[0].replace(/(?:^)\w/g, function (match) {
            return match.toUpperCase();
        });

        //$("#" + operation).first().clone().val("").insertAfter("#" + operation + ":last");
        //$("#" + operation + ":last").after($("#" + operation).first().clone().val(""));
        $("#" + operation).last().after($("#" + operation).first().clone().val(""));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="form-control" id="BccList" name="BccList" type="text" value="">
<button type="button" id="bccList-add" class="btn btn-primary btn-add">+</button>

我在这里想念什么？

Answer 1

TL; DR

为此使用class而不是id。

详细信息

id值必须在页面上必须唯一。当您违反该规则时，浏览器可以随意处理后续元素。共识似乎是他们将id留给了使用它的后续元素，但不要依赖于此。

如果这样做（将id留在后续元素上），$("#the-id")返回一个jQuery对象，其中只包装第一个：

console.log($("#the-id").length); // 1

<div id="the-id"></div>
<div id="the-id"></div>
<div id="the-id"></div>
<div id="the-id"></div>
<div id="the-id"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

（但也不要依赖于此，因为对于更复杂的选择器而言，它不是正确的。）

克隆的元素未显示在底部

1 个答案:

TL; DR

详细信息