廣場後的圖像

Question

下面的代碼的cernain數一個div：

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，那麼它將是完美的:)