在循环内增加以更改 css 值不起作用答案

【问题标题】：increment within a loop to alter css value doesn't work在循环内增加以更改 css 值不起作用
【发布时间】：2015-06-22 09:29:49
【问题描述】：

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

http://jsfiddle.net/fqmnksgL/

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

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

【问题讨论】：

$('div') 返回一个 HTMLCollection，它不像数组那样精确，正如您可能想的那样。 forEach 是一个数组方法

标签： javascript jquery zepto

【解决方案1】：

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

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

但它并没有按您的预期工作。也许你应该尝试类似另一个答案，它使用$.fn.prev

【讨论】：

您的回答比我的要好，但我有两个问题。 1）top不能是undefined吗？ 2）(+top)的意义是什么？
+ 将字符串转换为整数。
我用小提琴测试了你的代码，它不起作用jsfiddle.net/fqmnksgL/5

【解决方案2】：

你可以试试

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>

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：