javascript - 使用 jquery 生成 div 列

Question

jsfiddle 上的以下代码:

<div id="container">
    <div class="b">test1</div>
    <div class="b">test2</div>
    <div class="b">test3</div>
    <div class="b">test4</div>
    <div class="b">test5</div>
    <div class="b">test6</div>
</div>

CSS

.b {
    display:inline-block;
    position: relative;
    margin: 2px;
    float:left;
    width: calc(16.7% - 10px);
    height:400px;
    background-color: white;
    border: 1px solid black;
}

http://jsfiddle.net/329vcLLc/确实有效，它以我希望的格式显示 5 列。

我必须遍历一个数组以根据 div 的元素数量生成 div。我以为我可以使用 append() 函数，你觉得呢？以及如何为每个 div 设置宽度属性(因为它取决于列数)

有什么想法吗？

Answer 1

我不太明白 div 的数量取决于什么，但是如果您需要生成一些已知数量的 div，您可以这样做:

var n=8;
var $cont=$('#container');
for(var i=1; i<=n; i++)
{
    var d=$('<div>').addClass('b').html('test '+(i)).css('width', 'calc('+(100/n)+'% - 10px)');
    $cont.append(d);
}

.b {
    display:inline-block;
    position: relative;
    margin: 2px;
    float:left;
    height:400px;
    background-color: white;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"> 
</div>