以動態行數顯示容器內的div

我想在行中顯示div。用戶選擇div的數量，然後我想在行中顯示它們，這個數字取決於div的數量。例如，如果用戶選取6我想有2排3個的div，如果他撿到12我想3排有4個格等以動態行數顯示容器內的div

這裏是我有：的jQuery：

$("button").click(function(){ 
$('#container').html(''); 
var k=$('select').val(); 
for(var i=0;i<k;i++) 
{ 
    $('#container').append('<div class="square"></div>'); 
} 
});

CSS：

#container{ 
border-style: solid; 
float:left; 
} 
.square{ 
    float:left; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    margin-top: 10px; 
    margin-left: 10px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
}

HTML：

<select> 
    <option value="6">6</option> 
    <option value="8">8</option> 
    <option value="12">12</option> 
</select> 
<button>OK</button> 
<div id='container'></div>

Jfillde：https://jsfiddle.net/nrh1tzd1/

我該如何訂購這些div的行？

編輯：

我想通了，我可以只添加< BR>當我想結束行。但我有一個關於它的問題。我有代碼：

$(document).ready(function(){ 

$("button").click(function(){ 
$('#container').html(''); 
var k=$('select').val(); 
contained_divs = ''; 
for(var i=0;i<k;i++) 
{ 
    contained_divs += '<div class="square"></div>'; 
    if(i!=0 && i%2==0) 
    { 
     contained_divs += '<br>'; 
    } 

} 
$('#container').append(contained_divs); 
}); 
});

這裏更新jfiddle：https://jsfiddle.net/nrh1tzd1/2/

和它的作品，它顯示3周的div結束後的行。但我不明白它是如何工作的。

裏面，如果我有

i%2==0

所以之後3周的div開始新行，但爲什麼犯規它在第二行顯示2周的div後開始第三排。變量i等於4，所以它應該。此外，當裏面，如果我只會使用

i==2

然後它不工作，就像我想要它。

來源

2016-01-16 androlama

您應該使用的附加功能級聯的方式是這樣的：

$("button").click(function(){ 
    $('#container').html(''); 
    var k=$('select').val(); 
    var contained_divs = ''; 
    for(var i=0;i<k;i++) 
    { 
     contained_divs += '<div class="square"></div>'; 

    } 
    $('#container').append(contained_divs); 
});

更新的jsfiddle版本：JSFiddle

來源

2016-01-16 20:12:15 Tarek

以動態行數顯示容器內的div

回答

相關問題