コンテナー内の 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 コードにコメントを付けて再実行すると、私が意図していることがわかります。コメントを外すと、私が失敗したことがわかります。