How to add incremental values to a css attribute with Jquery

Question

Basically I have a series of DIVs with varying "top" "bottom" and "padding" values. The "bottom" and "padding" I want to 0 out or eliminate, but for the "top" I need each consecutive DIV to increase by 10px, starting with 0. So basically turn something like this:

<div class="someclass" style="position:absolute;top:10px;bottom:5;padding:4;"> </div>
<div class="someclass" style="position:absolute;top:15px;bottom:10;padding:2;"> </div>
<div class="someclass" style="position:absolute;top:5px;bottom:5;padding:6;"> </div>

INTO THIS:

<div class="someclass" style="position:absolute;top:0px;bottom:0;padding:0;"> </div>
<div class="someclass" style="position:absolute;top:10px;bottom:0;padding:0;"> </div>
<div class="someclass" style="position:absolute;top:20px;bottom:0;padding:0;"> </div>

Not quite sure of the best way to zero out the other properties, but the biggest issue has been figuring out the incremental increases. Here's a fiddle I've been working with, but it only ads the +10 to all divs instead of incrementing. Fiddle

fheck · Accepted Answer · 2015-01-21 23:58:41Z

4

Maybe something like this:

$('.someclass').each(function(index, value) {
    $(this).css({
        'top': (index * 10) + 'px',
        'bottom': 0,
        'padding': 0
    });
});

edited Jan 21, 2015 at 23:58

answered Jan 21, 2015 at 21:56

fheck

2801 gold badge5 silver badges15 bronze badges

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

Comments

charlietfl · Accepted Answer · 2015-01-21 21:55:41Z

0

If I understand expected results properly you can use the element index to increment with:

$('.someclass').css('top', function(i, v) {
    return i*10 ;
});

DEMO

answered Jan 21, 2015 at 21:55

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

spooky · Accepted Answer · 2015-01-21 21:59:40Z

0

Try this:

 var x = document.getElementsByClassName("someClass");
 for(var i=0; i<x.length; i++){
    x[i].style.top = (i*10) + 'px';
  };

answered Jan 21, 2015 at 21:59

spooky

1,6481 gold badge14 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to add incremental values to a css attribute with Jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related