Question

我要做的是写一个for循环来创建一定数量的div。 div的数量取决于我在数据库中的信息。例如，有15个复选框，我需要一个for循环来为用户点击的每个复选框创建一个div。我现在并不担心mysql方面的问题，我只关注for循环。

所以我有一个800px宽的主要div。假设用户单击8个复选框，我想弄清楚如何编写一个for循环，它将创建2行4个div，每个200px宽。所以每排4个div。现在div中的内容并不重要，我只需要知道如何处理这样的事情。

任何可以引导我朝着正确方向前进的想法？

以下是一些代码：

$(document).ready(function(){
    for(i = 0; i < (the number of checkboxes clicked); i++) {
        $('body').append('<div id="div'+ i +'" />');
    }
});

然后div将拥有相同的css代码，例如宽度为200px blah blah blah ...

我想我需要从数据库中单击复选框并为每个复选框创建一个div。

Answer 1

为什么不为此使用CSS？

<input type="hidden" id="checkboxCount" value="[# of checkboxes checked]" />

<div class='container'><!-- append HTML here--></div>

$(document).ready(function(){
    for( var i = 0; i < parseInt(document.getElementById('checkboxCount').value, 10); i++) {
        $('.container').append('<div class="ckbDiv" id="div'+ i +'" />');
    }

});

.container { width: 800px; }
.ckbDiv { float: left; width: 200px; }

Answer 2

var n_checked_checkboxes = $('input[type="checkbox"]:checked').length;
for (var i = 0; i < n_checked_checkboxes; i++) {
    $('<div/>', {
        'id': 'div' + i,
        'class': 'some_class_name'
    }).appendTo('body');
}

.some_class_name {
    width: 200px;
    float: left;
}

当你有body宽度为800px float: left时，第一行会为你做第二行（4个div）

这是一个例子：http://jsfiddle.net/DvjxL/

Answer 3

以下是此答案（how to count all check boxes in a form (Javascript)）的略微修改版本：

<script type="text/javascript">
var inputTags = document.getElementsByTagName('input');
var checkboxCount = 0;
for (var i=0, length = inputTags.length; i<length; i++) {
     if (inputTags[i].type == 'checkbox' && inputTags[i].checked) {
         checkboxCount++;
     }
}

for(i = 0; i < checkboxCount; i++) {
    $('body').append('<div id="div'+ i +'" />');
    //morestuff, div related
}    
</script>

对所有复选框的输入进行计数并进行检查。使用该号码，您可以执行for。

Answer 4

在表中获得二维坐标的一般方法是这个公式：

var items = ['first','second','third',....,'tenth'];
var n = items.length; // here: 10
var columns = 4;
var rows = Math.ceil(n/columns); // = 3
for (var i=0;i<n;i++) {
    var coords = {
        row: Math.ceil((i+1)/columns), // will return something between 1 and 4
        col: i % columns, // will return something between 0 and 3
    };
    doSomeThingWithItem(items[i],coords);
}

编写for循环来创建div

4 个答案: