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 并在 each 中添加元素的宽度：

(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);