Increment image width by 50px

Question

I have an image that appears multiple times, but I need the image width to increment by 50px each time it appears.

I've tried to accomplish this with jQuery, but I'm having no luck at the moment, any ideas where I'm going wrong?

The HTML that loops through to get each bit of content is:

<div class="hideme">
    <h3 class="text-white"><?php the_sub_field('whatcanwedo_stats_number'); ?></h3>
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/tash5.png" alt="tash5" class="what-can-we-do-tash" />
    <p><?php the_sub_field('whatcanwedo_stats_content'); ?></p>
</div>

And the jQuery I have is:

var w = 50;
var newWidth;
// what can we do tash
$('.what-can-we-do-tash').each(function(){
    newWidth === w;
    $(this).attr('width',newWidth);
    w+50;
});

However this doesn't seem to be doing anything :(

Answer 1

You should use .css():

$('.what-can-we-do-tash').css('width', function(i){
    return $(this).width() + (i * 50);
});

Here it is working: http://jsfiddle.net/wDpvV/1/

Answer 2

Try like

$('.what-can-we-do-tash img').each(function(){
    newWidth === w;
    $(this).css('width',newWidth+50);
    w+50;
});

or try like

$('.what-can-we-do-tash').each(function(){
    newWidth === w;
    $(this).css('width',newWidth+50);  //Or directly $(this).width(newWidth+50);
    w+50;        
});

Answer 3

The second argument of the callback is the old width. So this works :

$('.what-can-we-do-tash').width(function(i,width){
    return width + i * 50
});