0

I use a hack to justify divs in the container (marked answer). It works perfectly in static 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>

But when I do this via JS, the hack itself don't work (color styles are applied, I see pictures). Hovewer, the diff tool says that static and generated versions of DOM are identical.

Here's the code

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'} ));

Update

JSFiddle is here. If you comment the JS code and re-run, you'll see what I intent to do. If you uncomment, you'll see me failin'.

Community
  • 1
  • 1
efpies
  • 3,625
  • 6
  • 34
  • 45

1 Answers1

1

The problem is that you need spaces between elements, so just add

$thumbnailsContainer.append(' ');

Demo

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Unbelieveable! You're my savior. But can you explain this? It looks like a sort of magic for me. – efpies Oct 15 '13 at 00:55
  • You need spaces because if there's anything between your elements, anything can separate them, and you want them to be separated. – Oriol Oct 15 '13 at 18:55