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，将该变量拉出循环，然后根据需要重新创建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);
});

使用jquery在四个子div之后动态创建单个div中的多个div

1 个答案: