Question

I have some span tags:

<span w="560"></span>
<span w="340"></span>
<span w="120"></span>

With jQuery, I want to select EACH span, get the value inside its w attribute and animate it to that value + “px”.

I have a simple code that didn’t work:

$(document).ready(function(){

    $('span').animate({width: $(this).attr('w') + 'px'}, 2000);

});

Any Suggestions?

Thanks.

Answer 1

this does not make any sense with no context .

Use $.each loop and your code should work as this will refer to the current span in the iteration

$('span').each(function() {
    $(this).animate({width: $(this).attr('w') + 'px'}, 2000);
  });

UPDATE

As adeneo suggested , your HTML will not be validated while using custom attributes. Prepend it with data so that your HTML will be validated as well..

<span data-w="560"></span>

To access it you can use

$(this).data('w'); OR $(this).attr('data-w')