How to add incremental values to a css attribute with Jquery


Tags: jquery,css,increment,parsefloat

Problem :

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



Solution :

Maybe something like this:

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

    CSS Howto..

    how to use javascript if in IE but use css for all other browsers?

    How to navigate from one field to another field using Enter Key function in MVC5

    How to Style Unique CSS Navigation Menu

    CSS - How to remove white
    margins

    How to Create Diagonal Heading Line with Pure CSS

    How do I make an expanding textbox?

    How to inherit photo when hover on links under navigation bar?

    How to use another brackets/tabs policy for my CSS?

    How can I change opacity of an image in css without disturbing the overwritten text's opacity

    How to detect a smartphone through JavaScript/CSS?

    How do I make this responsive layout with CSS?

    How to modify a CSS display property from JavaScript?

    How to align text next to an icon with CSS?

    how can I align text/image/links within a grid
    of the twitter bootstrap css?

    How to move the icon / button outside the textbox x-webkit-speech?

    How to determine if image is hyperlinked?

    jQuery UI Tooltip with Arrow, why/how does this code work?

    How to get CSS to E-Mails back in Magento 1.9.1

    css how to align a div to the top of a containing div

    navigation bar arrow not showing under each tab CSS

    How can have all the images show up on my slider whilst differentiating each image with its own div tag?

    CSS: How to shrink first div in container instead of going outside of container

    Font is missing glyphs for specific language - how can I utilize css fallback in this case?

    How to top align two divs inside a third one?

    Design Issue: How to design a webpage that should show 11 elements with a description for each elements? [closed]

    How to make hyperlink for a background image?

    How to place two section elements next to each other using CSS? [duplicate]

    How is does Jquery display a tooltip on this span element?

    How to slide in divs from off screen into absolute layout using CSS transitions?

    How to debug CSS in Android native browser?