jquery - 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拆分函数）

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

Answer 2

至于打破文本并将其转换为整数：

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*/)
            ...
    }