jQuery - 基於用戶輸入創建引導網格

Question

請幫助我根據用戶輸入生成網格系統。

一樣，如果用戶輸入：

3 3 2 4 

然後，它會創建此引導電網：

<div class="row"> 
    <div class="span3">...</div> 
    <div class="span3">...</div> 
    <div class="span2">...</div> 
    <div class="span4">...</div> 
    </div> 

我曾嘗試：

jquery(document).ready(function(){ 
    var userInput = jQuery('.user-input').val(); 
    //now get number separated by space 
    // generate grid, dont know how to get numbers convert them to span(num) 
}); 

Answer 1

您可以使用拆分功能。

例子：

var input = "3 3 2 4"; 
var parts = input.split(" "); 
console.log(parts); 

輸出：

["3", "3", "2", "4"] 

然後就是通過數組循環由一個它們添加一個到您的div容器（更好雖然給ID到div容器）

這是循環數組的示例。 （參考：Jquery split function）

for (i = 0, l = parts.length; i < l; i++) { 
    $('div.container').append('<div class=span' + parts[i] + '></div>') 
} 

Answer 2

爲打破文本並將其轉換爲int數字：

var input = "3 3 2 4"; 
var nums = input.split(' ').map(function(i){return parseInt(i);}); 

，那麼你只需要循環，然後再創建父母喜歡孩子的孩子，孩子們：

for(var i =0; i<nums.length;i++) 
    for (var j =0; j<nums[i];j++) { 
     document./*container*/.appendChild(/*your sub-containers*/) 

     for (var k =0; k<nums[j];k++) 
      document./*sub-container*/.appendChild(/*your sub-sub-containers*/) 
      ... 
    }