javascript - jQuery:如何获取所有先前元素的宽度总和并将其放入数据属性

Question

如何获取每个先前元素的宽度并将它们相加(在页面加载后)

然后把值放在每个元素的数据属性中

这是 jsfiddle 上的代码 http://jsfiddle.net/jSfKJ/2/

那么如何制作这段代码

<ul>
 <li style="width:130px">Num 1</li>
 <li style="width:150px">Num 2</li>
 <li style="width:140px">Num 3</li>
 <li style="width:175px">Num 4</li>
 <li style="width:100px">Num 5</li>
</ul>

变成这样

<ul>
 <li style="width:130px" data-num="0">Num 1</li>
 <li style="width:150px" data-num="130">Num 2</li>
 <li style="width:140px" data-num="280">Num 3</li>
 <li style="width:175px" data-num="420">Num 4</li>
 <li style="width:100px" data-num="595">Num 5</li>
</ul>

这张图片更清楚地解释了我想要什么

我希望我已经很好地解释了我想要的东西

Answer 1

一个简单的方法是这样的:http://jsfiddle.net/jSfKJ/5/

您保存一个 var 并在每个中添加元素的宽度:

(function(){
    var total = 0;
    $('li').each(function() {
        $(this).attr('data-num', total)
        total += $(this).width()
    });
})();

此方法允许您将each 的数量减少到 1