jquery更新第n个元素之后的所有元素？

Question

假设我有以下代码:

<ul>
    <li data-val="1">1</li>
    <li data-val="4">2</li>
    <li data-val="2">3</li>
    <li data-val="5">4</li>
    <li data-val="1">5</li>
</ul>

我希望所有 ul li:gt(0) 的元素都有一个 innerHTML 和 data-val + innerHTML .所以我想要的结果是:

<ul>
    <li data-val="1">1</li>
    <li data-val="4">6</li>
    <li data-val="2">5</li>
    <li data-val="5">9</li>
    <li data-val="1">6</li>
</ul>

我可以使用 for 循环来执行此操作，但不确定这是否是性能和最少冗长代码方面的最佳方式。有没有更好的办法？

我会使用 jquery 和 css。

Answer 1

您可以调用.html()并传递一个对两个字段求和的函数:

$('ul li:gt(0)').html(function() {        
    return $(this).data('val') + parseInt($(this).html());
});​

http://jsfiddle.net/infernalbadger/VJAza/