jquery - 如何使用 Jquery 向 CSS 属性添加增量值

Question

基本上我有一系列具有不同“顶部”“底部”和“填充”值的 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 而不是递增。小提琴

Answer 1

也许是这样的：

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

Answer 2

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

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

DEMO

Answer 3

尝试这个：

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