如何使用Jquery动态地将Div并排添加？

Question

你能帮我使用Jquery动态地将Div并排添加吗？以下是我的代码：

$(document).ready(function() {
    $('#idButton').click(function() {
        for (int i = 0; i <= 3; i++) {
            $('body').append('<div id="divId"+'
            i ' style="height:80px;width:80px;background-image:url('
            flashcard1.png ');">Images</div>');
        }
    });
});​

- user1211133

Answer 1

要实现并排显示，我们需要使用CSS属性float。

如果你加上float:left，它们就会并排显示。尝试一下使用float。

像这样尝试一下...并将int改为var，如xdazz所述。

$(document).ready(function() {
    $('#idButton').click(function() {
        for (var i = 0; i <= 3; i++) {
            $('body').append('<div id="divId"+'
            i ' style="height:80px;width:80px;float:left;background-image:url(\'
            flashcard1.png \');">Images</div>');
        }
    });
});​

添加float后，还需要清除它才能使下一个标记正确工作。

- Vins

---

此外，append方法内的文本未正确连接。有两个加号字符被省略了。 - John Moses

Answer 2

这里有一个小技巧。

就像其他人说的一样，你需要使用CSS属性float。

此外，在JavaScript中，变量声明为var，而不是int。

- Per Salbark

Answer 3

JavaScript 中没有 int，应该使用 var。

for (var i = 0; i <= 3; i++) {
   $('body').append('<div id="divId' + i + '" style="height:80px;width:80px;background-image:url(\'flashcard1.png\');">Images</div>');
}

或者

for (var i = 0; i <= 3; i++) {
  $('<div />', {
    id: 'divId' + i,
    style: "height:80px;width:80px;background-image:url('flashcard1.png');"
   }).text('Images').appendTo("body");
}​

- xdazz

---

这个回答如何解决问题？ - jfriend00

Answer 4

添加 float:left 或者 float:right 的 div 样式

- Arpit Srivastava