在創建div元素時，給出有序的類名

Question

通過單擊“創建”，我要提供連續的類名稱：例如，現在如果單擊“創建”按鈕，它將創建以下<div class="div_3">Div 3</div> ：

<div id="container">
    <div class="div_1">Div 1</div>
    <div class="div_2">Div 2</div>
</div>
<input type="button" onclick="add()" value="Create"/>

這是JS

function add(){
    $("#container").append("<div>Div 3</div>")
}

https://jsfiddle.net/5gmr5j8z/

Answer 1

一種方法是計算現有元素（並加1）：

$("#container").append("<div>Div " + ($("#container div").length+1) + "</div>");

簡單的JSFiddle： https ://jsfiddle.net/TrueBlueAussie/5gmr5j8z/2/

您需要將相同的內容應用於該類，但這會有些混亂，因此下面的版本更整潔。

您也最好使用jQuery連接事件。 內聯事件處理程序不具有jQuery處理程序的功能（並且沒有充分的理由將事件注冊與事件處理程序分開）：

$('#add').click(function () {
    var count = $("#container div").length + 1;
    var $div = $("<div>", {
        class: "div_" + count,
        text: "Div " + count
    });
    $("#container").append($div);
});

JSFiddle： https ://jsfiddle.net/TrueBlueAussie/5gmr5j8z/3/

通常有更巧妙的方法來執行此類操作，但是您需要首先說明總體目標