jQuery - create bootstrap grid based on user input

Question

Please help me to generate grid system based on user input.

like if user inputs:

3 3 2 4

Then it will create this bootstrap grid:

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

I have tried:

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

what do these numbers represent and where is the bootstrap part ? — CME64
– CME64, Commented Jul 5, 2013 at 1:12
@CME64 number represent the bootstrap span size, and space means a new span — user007
– user007, Commented Jul 5, 2013 at 1:17

Community · Accepted Answer · 2017-05-23 11:56:31Z

3

You can use split function.

Example:

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

Output:

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

And then just loop through the array to add them one by one to your div container (better assign id to the div container though)

This is an example of looping through the array. (reference: Jquery split function)

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

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Jul 5, 2013 at 1:13

artsylar

2,6785 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user007 Over a year ago

Thnaks fro the answer, but can you please tell me how to generate span

user007 Over a year ago

PLease give me one simple example of loop, is same as PHP ?

artsylar Over a year ago

I'm glad I was able to help. :)

user007 Over a year ago

can I assign this loop in a variable ?

CME64 Over a year ago

@HowToPlease you can assign a function to a variable and use it later

CME64 · Accepted Answer · 2013-07-05 01:18:43Z

2

as for breaking the text and converting it to int numbers:

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

then you just have to loop creating the parents first and then the children and children of children like :

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

answered Jul 5, 2013 at 1:18

CME64

1,67213 silver badges24 bronze badges

2 Comments

CME64 Over a year ago

it seems that I was mislead by the word "grid" in the title, and that the OP wants just to append children to a container ! anyways here is an example for making a grid if the OP changed his mind !

user007 Over a year ago

Thanks for the solution, before coming to BS i was trying to do the same thing, but later I migrated to BS. Thanks it is also working +1

Collectives™ on Stack Overflow

jQuery - create bootstrap grid based on user input

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related