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>')
}