如何使用 Jquery 向 CSS 属性添加增量值答案

【问题标题】：How to add incremental values to a css attribute with Jquery如何使用 Jquery 向 CSS 属性添加增量值
【发布时间】：2015-01-21 21:50:37
【问题描述】：

基本上，我有一系列具有不同“顶部”“底部”和“填充”值的 DIV。我想将“底部”和“填充”设为 0 或消除，但对于“顶部”，我需要每个连续的 DIV 增加 10px，从 0 开始。所以基本上变成这样：

<div class="someclass" style="position:absolute;top:10px;bottom:5;padding:4;"> </div>
<div class="someclass" style="position:absolute;top:15px;bottom:10;padding:2;"> </div>
<div class="someclass" style="position:absolute;top:5px;bottom:5;padding:6;"> </div>

进入这个：

<div class="someclass" style="position:absolute;top:0px;bottom:0;padding:0;"> </div>
<div class="someclass" style="position:absolute;top:10px;bottom:0;padding:0;"> </div>
<div class="someclass" style="position:absolute;top:20px;bottom:0;padding:0;"> </div>

不太确定将其他属性归零的最佳方法，但最大的问题是计算增量。这是我一直在使用的小提琴，但它只将 +10 广告到所有 div 而不是递增。 Fiddle

【问题讨论】：

标签： jquery css increment parsefloat

【解决方案1】：

可能是这样的：

$('.someclass').each(function(index, value) {
    $(this).css({
        'top': (index * 10) + 'px',
        'bottom': 0,
        'padding': 0
    });
});

【讨论】：

谢谢！完美运行。

【解决方案2】：

如果我正确理解预期结果，您可以使用元素索引来递增：

$('.someclass').css('top', function(i, v) {
    return i*10 ;
});

DEMO

【讨论】：

【解决方案3】：

试试这个：

 var x = document.getElementsByClassName("someClass");
 for(var i=0; i<x.length; i++){
    x[i].style.top = (i*10) + 'px';
  };

【讨论】：