javascript - jquery each 循环和动画

Question

我有一些跨度标签:

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

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

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

$(document).ready(function(){

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

});

有什么建议吗？

谢谢。

Answer 1

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

使用$.each 循环，您的代码应该可以工作，因为this 将引用迭代中的当前跨度

$('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')