写一个for循环来创建div

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

所以我有一个800px宽的主div。假设用户点击了8个复选框，我想弄清楚如何编写一个for循环，创建2行4个div，每个200px宽。所以每行有4个div。它不是真正关心什么是在现在我只需要知道如何处理这样的事情。

任何想法都会导致我朝着正确的方向发展？

下面是一些代码：

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

然后DIV会有像宽度200像素等等等等相同的CSS代码...

我想我需要得到的复选框从数据库和点击为每个复选框创建一个div。

来源

2013-05-08 TheNameHobbs

尽管您确实描述了您的问题，但是非常感谢能够看到一些代码。考虑添加一些代码，以便您的问题具有更高的价值 – 2013-05-08 21:09:23

像其他人一样，向我们展示您所做的atm。我们不会随意抛出代码（这不是一个论坛），我们修复了无法正常工作并解释原因（问答）的原因。 – RaphaelDDL 2013-05-08 21:11:00

如果你用'8'替换'（单击的复选框的数量）'，但是如果你需要两行，你需要在每个嵌套循环之后嵌套循环和垂直空间 – 2013-05-08 21:16:58

为什么不使用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-08 21:21:13

然后，对于多个复选框，只需编写另一个从数据库读取的函数哪些箱子被检查？ – TheNameHobbs 2013-05-08 21:24:36

啊，呃。您可以将这些信息从服务器端传递到隐藏字段中。（将更新答案） – 2013-05-08 21:26:03

下面是这个答案的一个稍作修改的版本（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。

来源

2013-05-08 21:24:57 RaphaelDDL

的一般方法得到2维COORDS在一个表是这样的公式：

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-08 21:28:00 Zim84

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宽度为800像素float: left会做第二排为你，当第一排满（4格）

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

来源

2013-05-08 21:36:19 imkost

写一个for循环来创建div

回答

相关问题