0

我使用 hack 来证明div容器中的 s（标记答案）。它在静态 HTML 中完美运行。

<div id="gallery-thumbnails">
    <div class="gallery-thumbnail">
        <img src="1.jpg" alt="alt" title="title">
    </div>
    <div class="gallery-thumbnail">
        <img src="2.jpg" alt="alt" title="title">
    </div>
    <div class="gallery-thumbnail">
        <img src="3.jpg" alt="alt" title="title">
    </div>
    <div class="gallery-thumbnail">
        <img src="4.jpg" alt="alt" title="title">
    </div>
    <span class="stretch"></span>
</div>

但是当我通过 JS 执行此操作时，hack 本身不起作用（应用了颜色样式，我看到了图片）。但是，diff 工具表示 DOM 的静态版本和生成版本是相同的。

这是代码

var thumbnailsContainer = $('#gallery-thumbnails');
$(thumbnailsContainer).children('*').each(function() {
    $(this).remove();
});

$(lists[index]).children('img').each(function(index, picture) {
    var thumbnail = $('<div>', { class: "gallery-thumbnail" });
    var thumbnailImage = $('<img>', { src: $(picture).attr('src'), alt: $(picture).attr('alt'), title: $(picture).attr('title') });
    $(thumbnail).append(thumbnailImage);
    $(thumbnailsContainer).append(thumbnail);
});

$(thumbnailsContainer).append($('<span>', { class: 'stretch'} ));

更新

JSFiddle 在这里。如果您评论 JS 代码并重新运行，您会看到我打算做什么。如果你取消注释，你会看到我失败了。

4

1 回答 1

1

问题是元素之间需要空格，所以只需添加

$thumbnailsContainer.append(' ');

演示

于 2013-10-15T00:42:34.520 回答