如何使用 Jquery 将增量值添加到 css 属性

Question

基本上我有一系列 DIV 具有不同的 "top" "bottom" 和 "padding" 值。 "bottom"和"padding"我想0出或消除，但是对于"top"我需要每个连续的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>

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

Answer 1

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

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

DEMO

Answer 2

也许是这样的：

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

Answer 3

试试这个：

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

如何使用 Jquery 将增量值添加到 css 属性

How to add incremental values to a css attribute with Jquery

css

jquery

increment

parsefloat