Поместите div после числа изображений

Question

следующий код:

var images = [/*array with images*/];
var nofImages = images.length;

$(document).ready(function(){

    var docheight = $('.main_insidem').height();    
    var docwidth = $('.main_insidem').width();
    var he = Math.round((docheight/120));
    var wi = Math.round((docwidth/115));
    var total = (he*wi);

    var container = document.getElementById('slidesContainer');
    for (var i=0;i<nofImages;i++) {
        var slide = document.createElement('div');
        slide.className="slide";

        var img = document.createElement('img');
        img.src=images[i];
        img.className="image"+i;

        slide.appendChild(img);
        container.appendChild(slide);
    }

}) 

Показывает:

<div class='main_insidem' style="height:500px;">
    <div id="slidesContainer">
        <div class="slide"><img src="1.png" class="image0"></div>
        <div class="slide"><img src="2.png" class="image1"></div>
        <div class="slide"><img src="3.png" class="image2"></div>
        <div class="slide"><img src="4.png" class="image3"></div>
        .
        .
        .
        .
    </div>
</div>

Но мне нужно:

<div class='main_insidem' style="height:500px;">
    <div id="slidesContainer">
        <div class="slide"><img src="1.png" class="image0"> <img src="2.png" class="image1">.. and and so on until the value in var total is reached</div>
        <div class="slide"><img src="..png" class="image.."> <img src="...png" class="image">.. and and so on until the value in var nofImages is reached</div>
        .
        .
        .
        .
    </div>
</div>

Как я могу это сделать?

Большое спасибо

Answer 1

Попробуйте это,

var images = [/*array with images*/],
    nofImages = images.length,
    imagesPerDiv = 2;

$(document).ready(function(){
    var docheight = $('.main_insidem').height(),
        docwidth = $('.main_insidem').width(),
        he = Math.round((docheight/120)),
        wi = Math.round((docwidth/115)),
        total = (he*wi),
        container = $('#slidesContainer');

    loopCNT = Math.ceil(nofImages  / imagesPerDiv);

    for (var i=0;i<=loopCNT;i++) {
        var slide = document.createElement('div');
        slide.className="slide";

        for (var j=i-1*imagesPerDiv;j<=imagesPerDiv;i++) {
            var img = document.createElement('img');
            img.src=images[j];
            img.className="image"+j;
            slide.appendChild(img);
            j++;
        }
        container.appendChild(slide);
    }
}) 

---

Вы также можете обрезать много жира и "правильно" использовать jQuery и сократить все это до следующего:

var images = [/*array with images*/],
    nofImages = images.length,
    imagesPerDiv = 2;

$(function() {
    loopCNT = Math.ceil(nofImages  / imagesPerDiv);
    for (var i=0;i<=loopCNT;i++) {
        var slide = $('<div />', { class: 'slide' });

        for (var j=i-1*imagesPerDiv;j<=imagesPerDiv;i++) {
            $('<img />', { class: "image"+j, src: images[j] }).appendTo(slide);
            j++;
        }
        $('#slidesContainer').append(slide);
    }
})

Answer 2

Взгляните на это: http://jsfiddle.net/AfNUS/2/

Это не совсем правильно, он продолжает создавать пустой div перед первым набором изображений. Он делает то, что вам нужно, если вы можете понять, почему он добавляетпустой div тогда будет отлично :) 1004 *