动态创建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(); 
});