jquery每个循环和动画

Question

我有一些span标签：

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

使用jQuery，我想选择每个span，在其w属性中获取值并将其设置为该值+“px”。

我有一个不起作用的简单代码：

$(document).ready(function(){

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

});

任何建议？

感谢。

Answer 1

这个在没有上下文的情况下没有任何意义。

使用$.each loop，您的代码应该用作此将引用迭代中的当前范围

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

<强>更新

建议使用adeneo时，在使用自定义属性时不会验证您的HTML。以数据为前缀，以便验证您的HTML ..

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

要访问它，您可以使用

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

Answer 2

使用有效的属性，例如data-w：

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

并迭代元素

$(document).ready(function(){

    $('span').each(function(idx, elm) {
        $(elm).animate({width: $(elm).data('w')}, 2000);
    });

});