jQuery: How to get the width sum of all previous elements and put it in data attribute
<p>how to get the width of each previous elements and sum them up (after page load)<br><br>
Then put the value in each  element data attribute<br><br>
This is the code on jsfiddle <a href="http://jsfiddle.net/jSfKJ/2/" rel="nofollow">http://jsfiddle.net/jSfKJ/2/</a><br><br>
so how to make this code<br></p>

<pre><code>&lt;ul&gt;
 &lt;li style="width:130px"&gt;Num 1&lt;/li&gt;
 &lt;li style="width:150px"&gt;Num 2&lt;/li&gt;
 &lt;li style="width:140px"&gt;Num 3&lt;/li&gt;
 &lt;li style="width:175px"&gt;Num 4&lt;/li&gt;
 &lt;li style="width:100px"&gt;Num 5&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>to be like this<br></p>

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

<p>This image to explain more clearly what I want <br>
<img src="http://i.stack.imgur.com/ZT85d.jpg" alt="enter image description here">
<br>
I hope I've explained what I want well</p>
