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

jQuery - 根据用户输入创建引导网格

2 个答案: