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

Answer 2

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

Answer 3

只需在你的小提琴中进行迭代，如下所示：

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