Jquery: Take # from input and create div

Question

Hey Guys,

I have a few inputs which allow people to input a number (in px) for width, one for the # of columns, and another input to set the margins for each div.. Using jquery, how do I take these numbers and create these divs with the proper width and margins?

Example:

[Input] Width: 960px [Input] # of Columns [Input] Margins

Basically I am trying to show how the set up will be so the user will see it.

Answer 1

var numCols = parseInt($('#columns').val());
var width = parseInt($('#width').val());
var margins = $('#margins').val();

var output = "";
for(var i=0;i<numCols;i++)
{
    output += '<div class="created">Div #'+(i+1)+'</div>';
}
$('#output').append(output);
$('.created').css(
{
    width: width+'px',
    margin: margins
});

This assumes the margins are passed in a valid format to be the valid of the margin CSS property, and that the DIVs created are placed within a container with the ID output