jquery - 附加文本超出 div

Question

我有以下静态 HTML：

<div id="divSlots"></div>

和一些 jQuery：

success: function(data) {

if (data.d[0]) {

        $.each(data.d, function(index, data) {

            $("#divSlots").append("<div id='divSlot-" + data.id + "'>");
            $("#divSlots").append(data.time);
            $("#divSlots").append("</div>");

        });

为什么这给了我这个输出：

<div id="divSlots">
    <div id="divSlot-0"></div>
    09:00 
    <div id="divSlot-1"></div>
    09:30
</div>

而不是这个？

<div id="divSlots">
    <div id="divSlot-0">09:00</div>
    <div id="divSlot-1">09:30</div>
</div>

我在谷歌浏览器中得到这个，不确定 IE8+

Answer 1

试试这个代码

当首先追加时"<div id='divSlot-" + data.id + "'>"，浏览器将其呈现为完整，div即自动关闭 div 标签。因此，最好将所有内容追加到一个追加中以使其更快n正确。

$.each(data.d, function (index, data) {
    $("#divSlots").append("<div id='divSlot-" + data.id + "'>" + data.time + '</div>');
});

Answer 2

可以这么说，您不能附加“半个 div”。您的浏览器显示完整的 div，然后data.time是最后一个关闭的 div。改用这个：

$("#divSlots").append(
    '<div id="divSlot-' + data.id + '">' + data.time + '</div>'
);

Answer 3

$("#divSlots").append('<div id="divSlot-' + data.id + '">' + data.time + '</div>');