Javascript jQuery：如何获取前面所有元素的宽度和并将其放入数据属性中

如何获取前面每个元素的宽度并将其相加（页面加载后）

然后将值放入每个元素数据属性中

这是JSFIDLE上的代码

那么如何生成此代码

<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>

数量1
数量2
数量3
数量4
数量5

像这样

<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>

编号1
数量2
编号3
数量4
编号5

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

---

我希望我已经很好地解释了我想要什么

一个简单的方法是：

您可以保存一个变量，并在每个变量中添加元素的宽度：

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

---

此方法允许您将每个

的数量减少到1
，只需在小提琴中重复，如下所示：

var globalheight = 0;
$(document).ready(function(){
    $('ul li').each(function(){
        $(this).attr({'data-num':globalheight}); 
        globalheight = globalheight+$(this).width();
    });  
});

var ctr = 0;
$('li').each(function() {
    var itm = $(this);
    itm.data().num = ctr;
    ctr += itm.width();
});
// below just to show u the output.
$('li').each(function (){
    console.log($(this).data());  
});

不清楚您是希望它保存到数据中，还是希望它成为标记中可见的实际属性。如果可见，只需将每个添加为itm.attr（'num'，ctr）
 好的。我会使用.data（“num”，total）而不是attrI，但他说他想要这样的DOM:
num 1
。如果我没有错，
数据
不会更新DOM。