动态创建使用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); 
});