increment css in javascript or JQuery

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

And you haven't written a single line of javascript to start with ? — wakooka
– wakooka, Commented Nov 16, 2012 at 22:37
Do you want to increment it on click, on hover, on load? — Boris
– Boris, Commented Nov 16, 2012 at 22:41
@jeromesmadja i have written; i lost the javascript while posting. some editing issue. — user1769790
– user1769790, Commented Nov 16, 2012 at 23:02

Kai Qing · Accepted Answer · 2012-11-16 23:01:52Z

4

Ok, I would say you should apply a class to the divs in question:

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

$('.indent').each(function(){
    $(this).find('span').each(function(i, v){
         $(this).css('left', (i * 10) + 'px');
    });
});

That's one way to do it. I don't know what you're doing with the classes assigned to each span. But if it is for the sake of trying to indent, you can just remove the classes from span and let the generic selector do the work for you.

edited Nov 16, 2012 at 23:01

answered Nov 16, 2012 at 22:41

Kai Qing

18.9k6 gold badges41 silver badges61 bronze badges

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

8 Comments

Louis Loudog Trottier Over a year ago

You were faster than me. but yes it is as simple as that.

wirey00 Over a year ago

that's under the assumption that he doesn't have any other spans on his page

Kai Qing Over a year ago

I know. I should have voted to close but I was bored... or something. Notice I didn't bother using v... that's my revenge I guess.

Kai Qing Over a year ago

@wirey - true, but he said "each span." He should just apply a single class to all that need this attention but we don't know what he's up to or what he really needs. I'm actually surprised this many of us felt the need to give this kind of attention to this thread. we're all too kind

VMAtm Over a year ago

@Kai Qing Just trying to get last upvote for the daily cap :)

|

wirey00 · Accepted Answer · 2012-11-16 22:50:11Z

2

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

answered Nov 16, 2012 at 22:50

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

1 Comment

wirey00 Over a year ago

eh.. not too worried. Just want to help :)

VMAtm · Accepted Answer · 2012-11-16 22:43:25Z

1

Use Attribute Starts With Selector to select only needed spans by class:

$(document).ready(function() {
    $("[class^=cell]'").each(function(i, v){
        $(this).css('left', (i * 10) + 'px');
    });      
});

answered Nov 16, 2012 at 22:43

VMAtm

28.4k17 gold badges85 silver badges133 bronze badges

Comments

telemmaite · Accepted Answer · 2012-11-16 22:43:25Z

0

Are you using a frame work like jquery/prototype to select the spans from the html? You can just use document.getElementsByTagName('span') then just loop them and increment the property (left)

answered Nov 16, 2012 at 22:43

telemmaite

11 silver badge1 bronze badge

Collectives™ on Stack Overflow

increment css in javascript or JQuery

4 Answers 4

8 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related