写一个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。
为什么不使用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; }
然后,对于多个复选框,只需编写另一个从数据库读取的函数哪些箱子被检查? – 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
。
的一般方法得到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);
}
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:09:23
像其他人一样,向我们展示您所做的atm。我们不会随意抛出代码(这不是一个论坛),我们修复了无法正常工作并解释原因(问答)的原因。 – RaphaelDDL 2013-05-08 21:11:00
如果你用'8'替换'(单击的复选框的数量)',但是如果你需要两行,你需要在每个嵌套循环之后嵌套循环和垂直空间 – 2013-05-08 21:16:58