动态创建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

您可以使用:last修饰符。以下是一个工作示例：http://jsfiddle.net/ayezutov/ZsBgY/2/

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