Dynamic Padding? (jQuery)

Question

Ok. What I would like to do is to use jQuery to go through all <span> tags with a certain class (.link) and to set their padding-right css value to 20% of current width of the span.

I do not have any code to show because I am not good with jQuery and the rest is pretty much self-explanatory.

Any help would be much appreciated. Thanks :)

Answer 1

You can use the css() method with a callback function that returns the width of the currently iterated element x 0.2

$('span.link').css('padding-right', function() {
    return $(this).width() * 0.2;
});

In newer browsers you could do this with CSS as well

span.link { padding-right: calc(20%); }