javascript - How to give an independent values in CSS with jQuery -

i have html mark up:

<div>   <figure></figure>   <figure></figure>   <figure></figure> </div> 

and css:

div {   position: relative;  }  figure {   position: absolute;   top: 0; left: 0; } 

now, i'm trying push aside each element arranged separately each other, when first has margin of 0 second has margin of 100px, while second has margin of 100px third have margin of 200px;

and jquery:

var circle = $('figure'),     f_circle = content_container.find(circle).first(),     n_circle = f_circle.next();      var circle_width = circle.width();          var circle_separate = function(){             n_circle = f_circle;             for(var i=0; i< options.elements_number; i++) {                 n_circle.each(function(){                     $(this).css({                         'margin-left': +circle_width * (options.elements_number -2) + 10 * (options.elements_number - 2) + 'px'                     });                 })             }         } 

and if have more 3 elements behave more similarly, last shied away before last.

to have in ouptut: thx help.

;you can use jquery.each() cycle through them all, each functionality gives position in array of current element , need multiply desired width

var circle = $('figure'); var circle_width = circle.width();  var circle_separate = function(){     circle.each(function(idx){         $(this).css('margin-left',(idx * (circle_width +10))+'px');         }) }