0

コンテナー内の sを正当化するためdivにハックを使用します(マーク付きの回答)。静的 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 経由でこれを行うと、ハック自体が機能しません (カラー スタイルが適用され、写真が表示されます)。ただし、差分ツールによると、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 に答える