動態創建使用jquery創建四個子div後的單個div中的多個div

Question

我創建動態div和圖像標記，有一個父div，並且它包含多行 它由行流體，行流體包含如圖所示的其他兩個div， 每行包含這些圖像中的四個，但問題是我必須先創建行流體， 但在此之後它只會在該div中顯示四個圖像之後創建並且 附加到它，在那個序列只有我必須創建它，下面是我使用的代碼，請 我的問題。提前致謝。

<script type="text/javascript"> 
    var count = 0; 

    $.each(description, function(key,value) { 

    var s_image_path=value.s_img_path; 


    var mainDiv = document.getElementById('parent'); 

    var newDiv = document.createElement('div'); 
    newDiv.setAttribute('class','row-fluid'); 


    var album_img=document.createElement('img'); 
    album_img.setAttribute('class','img-responsive'); 


    var aTag = document.createElement('a'); 
    aTag.setAttribute('class','thumbnail t_clicked'); 

    var img_div_3 = document.createElement('div'); 
    img_div_3.setAttribute('class','col-lg-4 col-md-4 col-xs-6 thumb'); 

    var img_div_2 = document.createElement('div'); 
    img_div_2.setAttribute('class','span4'); 

    mainDiv.appendChild(newDiv); 
    newDiv.appendChild(img_div_2); 
    img_div_2.appendChild(img_div_3); 
    img_div_3.appendChild(aTag); 
    aTag.appendChild(album_img); 

    }); 
</script> 

如：

<div class="row-fluid"> 

     <div class="span4"> 
     <div class="col-lg-4 col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="img/gallery/photo111.jpg" alt=""> 
       </a> 
     </div> 
     </div> 

     <div class="span4"> 
     <div class="col-lg-4 col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="img/gallery/photo10.jpg" alt=""> 
       </a> 
     </div> 
     </div> 

     <div class="span4"> 
     <div class="col-lg-4 col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="img/gallery/photo11.jpg" alt=""> 
       </a> 
     </div> 
     </div> 
     </div> 



<div class="row-fluid"> 

      <div class="span4"> 
      <div class="col-lg-4 col-md-4 col-xs-6 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="img/gallery/photo111.jpg" alt=""/> 
        </a> 
      </div> 
      </div> 

      <div class="span4"> 
      <div class="col-lg-4 col-md-4 col-xs-6 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="img/gallery/photo10.jpg" alt=""> 
        </a> 
      </div> 
      </div> 

      <div class="span4"> 
      <div class="col-lg-4 col-md-4 col-xs-6 thumb"> 
        <a class="thumbnail" href="#"> 
         <img class="img-responsive" src="img/gallery/photo11.jpg" alt=""> 
        </a> 
      </div> 
      </div> 
      </div> 

Answer 1

首先，你已經使用jQuery，所以利用它。您可以更換更簡潔的jQuery那些冗長的DOM處理方法調用：

var mainDiv = $('#parent'); 

$.each(description, function(key,value) { 
    var rowDiv = $('<div>').addClass('row-fluid').appendTo(mainDiv); 
    var img_div_2 = $('<div>').addClass('span4').appendTo(rowDiv); 
    var img_div_3 = $('<div>').addClass('col-lg-4 col-md-4 col-xs-6 thumb').appendTo(img_div_2); 
    var aTag = $('<a>').addClass('thumbnail t_clicked').appendTo(img_div_3); 
    $('<img>').addClass('img-responsive').appendTo(aTag); 
}); 

有，那最好不過了。現在，只添加row-fluid格後有四象，扳指可變退出循環，並重新創建需要的DIV：

var mainDiv = $('#parent'); 
var rowDiv = $('<div>').addClass('row-fluid').appendTo(mainDiv); 
$.each(description, function(key,value) { 
    if (rowDiv.children().length >= 4) { 
     rowDiv = $('<div>').addClass('row-fluid').appendTo(mainDiv); 
    } 
    var img_div_2 = $('<div>').addClass('span4').appendTo(rowDiv); 
    var img_div_3 = $('<div>').addClass('col-lg-4 col-md-4 col-xs-6 thumb').appendTo(img_div_2); 
    var aTag = $('<a>').addClass('thumbnail t_clicked').appendTo(img_div_3); 
    $('<img>').addClass('img-responsive').appendTo(aTag); 
});