Question

I have ‘span’ tags and each span i need to increment ‘left’ property by 10px.

Ex:-

CSS:
span.cell_0     {   left:   0px;       }
span.cell_1     {   left:   10px;      }
span.cell_2     {   left:   20px;      }
HTML:
<span class="cell_0">name</span>
<span class="cell_1">#</span>

i have javascript written as:

$( 'span' ).css( 'left', '+=10px' );  

but am trying for each span

Am designing layout; rows and columns.

<div class="row1">
 <span class="cell_0">name</span>
 <span class="cell_1">#</span>
</div>
<div class="row2">
 <span class="cell_0">name</span>
 <span class="cell_1">#</span>
</div>

CSS for rows:

.row1, .row2, .row3, .row4{
font-size:12px;
padding:5px 20px 20px 0;
}

Answer 1

Here’s what I would do with what you’ve given

$('span.[class^="cell_"]').each(function(i,v){ // loop through each span with class that starts with cell_
   var num = +$(v).attr('class').split('_')[1]; // get the number from the class
   $(v).css('left',(num * 10) + 'px') // use it to get the px
});