javascript - jquery set div attr id 不起作用，但对于其余元素

Question

我正在创建一个 div 及其包含的所有元素的克隆。对于新的 div，我正在更改 ID，我可以更改除 div 之外的所有 ID，知道我做错了什么吗？

HTML

<form class="form-horizontal" action="${pageContext.request.contextPath}/search" method="post">             
    <div class="card" id="criteriaContainer_0">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12" id="andOr_0">And</div>
            </div>
            <div class="row">
                <div class="col-sm-2">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="leftParenthesis_0" readonly>
                        <div class="input-group-append">
                            <button class="btn btn-outline-success" id="addLeftParenthesis_0" title="Add left parenthesis" onclick="addLeftParenthesis(this)" type="button">+</button> 
                            <button class="btn btn-outline-danger" id="delLeftParenthesis_0" title="Remove left parenthesis" onclick="delLeftParenthesis(this)" type="button">-</button> 
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="criteria_0" placeholder="Enter search term" name="criteria_0" required>
                </div>
                <div class="col-sm-2">
                    <div class="input-group mb-3">                                  
                        <div class="input-group-prepend">
                            <button class="btn btn-outline-danger" id="delRightParenthesis_0" title="Remove right parenthesis" onclick="delRightParenthesis(this)" type="button">-</button> 
                            <button class="btn btn-outline-success" id="addRightParenthesis_0" title="Add right parenthesis" onclick="addRightParenthesis(this)" type="button">+</button> 
                        </div>
                        <input type="text" class="form-control" id="rightParenthesis_0" readonly>
                    </div>
                </div>
            </div>
        </div>                  
    </div>              

    <div class="row">
        <div class="col-sm-2 offset-sm-10">
            <button class="btn" id="addCriteria" title="Add (Up to 5 criteria)" onclick="addSearchTerm()" type="button"><i class="fas fa-plus-circle" style="font-size:48px;color:green"></i></button>
            <button class="btn" id="delCriteria" title="Delete search term" onclick="delSearchTerm()" type="button"><i class="fas fa-minus-circle" style="font-size:48px;color:red"></i></button>
        </div>
    </div>          
</form> 

JQuery

var current_id = 0;
function addSearchTerm() {
    current_id++;
    var newCriteria = $("#criteriaContainer_0").clone(true);

    // Setting Ids for new elements
    // NOT WORKING (Always shows as criteriaContainer_0 in the new ones)
    $(newCriteria).find("#criteriaContainer_0").attr("id", "criteriaContainer_" + current_id);

    // Beyond this point everything works as expected (andOr_1, andOr_2, ...)
    $(newCriteria).find("#andOr_0").attr("id", "andOr_" + current_id);
    $(newCriteria).find("#leftParenthesis_0").attr("id", "leftParenthesis_" + current_id);
    $(newCriteria).find("#addLeftParenthesis_0").attr("id", "addLeftParenthesis_" + current_id);
    $(newCriteria).find("#delLeftParenthesis_0").attr("id", "delLeftParenthesis_" + current_id);
    $(newCriteria).find("#criteria_0").attr("id", "criteria_" + current_id);
    $(newCriteria).find("#delRightParenthesis_0").attr("id", "delRightParenthesis_" + current_id);
    $(newCriteria).find("#addRightParenthesis_0").attr("id", "addRightParenthesis_" + current_id);
    $(newCriteria).find("#rightParenthesis_0").attr("id", "rightParenthesis_" + current_id);

    // Cleaning values
    $(newCriteria).find("#leftParenthesis_" + current_id).val("");
    $(newCriteria).find("#criteria_" + current_id).val("");
    $(newCriteria).find("#rightParenthesis_" + current_id).val("");

    // Insert new criteria
    $(newCriteria).insertAfter(".card:last");

    if (current_id > 4) {
        $("#addCriteria").prop("disabled",true);
    } else {
        $("#addCriteria").prop("disabled",false);
    }               
};

Answer 1

请尝试改变

var newCriteria = $("#criteriaContainer_0").clone(true);

至

  var newCriteria = $("#criteriaContainer_0").clone(true).attr("id", "criteriaContainer_" + current_id);