Question

通过java脚本，我必须创建一个div。在div里面我必须附加一个div列表（动态加载），这样我就可以为那个父（创建）div应用一个边框。例如：如果我动态加载10个div，我必须为每3个div创建一个父div，这样我就可以为3 div的父div应用一个边框。

<div class="main">
    <div class="div_item">
        item 1
    </div>
    <div class="div_item">
        item 2
    </div>
    <div class="div_item">
        item 3
    </div>
    <div class="div_item">
        item 4
    </div>
    <div class="div_item">
        item 5
    </div>
    <div class="div_item">
        item 6
    </div>
    <div class="div_item">
        item 7
    </div>
    <div class="div_item">
        item 8
    </div>
</div>

对于这些项目列表，我必须为每3个div创建一个父div。任何人都可以帮我找到解决方案吗？

Answer 1

如果您有元素容器，可以使用jQuery append()函数向其追加元素。对元素进行循环并将它们包装成3个组。

var nodes = 21; // total number of nodes

for (var i=0; i<nodes; i++)
{
    if(i%3==0) {
        $('#container').append('<div class="parent"></div>');
    }

    $('.parent').last().append('<div class="child">child '+ i +'</div>');
}

Fiddle1

当然，这个片段可以扩展到加载数据的情况，即从AjaX调用到后端脚本（请注意在第二个循环上使用nodes.length，这允许你循环知道结果的大小。）

// Create array (can be made with data load from backend)
var total = 21;
var nodes = new Array();

for (var i=0; i<total; i++)
{
    var desc = "child" + i;
    var node = {id:i, description:desc};
    nodes.push(node);
}

// Output results
for (i=0; i<nodes.length; i++)
{
    if(i%3==0) {
        $('#container').append('<div class="parent"></div>');
    }

    $('.parent').last().append('<div class="child">'+ nodes[i].description +'</div>');
}

Fiddle2

动态创建div并使用java脚本在创建的div中附加div列表

1 个答案: