動態創建div盒

Question

我有一個應用程序動態創建具有相同內容的重疊div盒。

當我將內容添加到框中時，我將內容div附加到類選擇器「.box」（我不能在這裏使用id，因爲一個id只能在頁面上存在）。問題在於，每次創建新框時，都會將內容應用於所有現有框。我只是想將內容添加到最後創建的框中。

這樣做的最佳方法是什麼？

//功能還申請內容到新的對話框：

var box = $('<div/>', { 
    'class': 'imgDiv', 
}).appendTo('.box'); 

... 

Answer 1

如果創建的最後.box是最後的頁面上，你可以這樣做：

var box = $('<div/>', { 
    'class': 'imgDiv', 
}).appendTo($('.box').last()); 

你var box =被有點混亂，但。如果您在代碼的相同部分創建新的box，則應該保留對該新框的引用，然後將內容附加到該框。

Answer 2

如果附加到.box選擇器，選擇器將選擇帶有框標記的所有標記。你需要的只是選擇你想添加內容的特定框！

var box = $('<div/>', { 
    'class': 'imgDiv', 
}).appendTo('#my_specific_box'); 

或者使用僞選擇最後：

var box = $('<div/>', { 
    'class': 'imgDiv', 
}).appendTo('.box:last'); 

Answer 3

你可以嘗試運行一個櫃檯，並用該計數器，即更新每個框的ID：.attr（「身份證」， 'box-'+ counter）。

Answer 4

您可以使用:last修飾符。這裏是一個工作示例：http://jsfiddle.net/ayezutov/ZsBgY/2/

$("#append").click(function(e){ 
    $("<div>appended</div>").appendTo(".box:last"); 
    e.preventDefault(); 
});