寫一個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

回答

相關問題