Question

我想在行中显示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？

编辑：

我发现我可以添加＆lt; BR＆GT;当我想结束行。但我有一个问题。我有代码：

$(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

然后它不像我想要的那样工作。

Answer 1

您应该以串联的方式使用append函数，如下所示：

$("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

在动态行数中显示容器内的div

1 个答案: