在循环中递增以更改 css 值不起作用

Question

我试图在 foreach 中增加当前 'top' 属性值的值。

var percent = 50;
$('div').forEach(function (obj, i) {
    $(obj).css('top', $(obj).css('top') + percent);
});

我上面的代码有什么问题吗？

Answer 1

forEach 是 Array 的一部分。请改用 each。您可以使用函数回调来增加当前元素的top 属性。

var percent = 50;
$('div').each(function() {
    $(this).css('top', function(_, top){ 
        return parseInt(top, 10) + percent;
    });
});

但它并没有像您预期的那样工作。也许你应该尝试像其他答案一样的东西，它使用 $.fn.prev

Answer 2

px值不能加百分比(%)，需要转换其中之一

var px = 50;
$('div').each(function () {

    $(this).css('top', parseInt($(this).prev().css('top')) + px);
});

http://jsfiddle.net/fqmnksgL/6/

Answer 3

你可以试试

var percent = 50;
$('div').css('top', function(i, obj) {
  return i * percent;
});

div {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  top: 10px;
  left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

在循环中递增以更改 css 值不起作用

increment within a loop to alter css value doesn't work

javascript

jquery

zepto