1

我想要做的是编写一个 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。

4

4 回答 4

1 
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拥有的宽度 800pxfloat: left将为您做第二行，当第一行已满（4 个 div）

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

于 2013-05-08T21:36:19.947 回答
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; }
于 2013-05-08T21:21:13.170 回答
0

这是此答案的略微修改版本（如何计算表单中的所有复选框（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你所做的了。

于 2013-05-08T21:24:57.360 回答
0

在表格中获取二维坐标的一般方法是以下公式：

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);
}
于 2013-05-08T21:28:00.947 回答