如何在 JavaScript for-in 循环的每次迭代中相对递增 CSS 值

How do I relatively increment a CSS value on each iteration of a JavaScript for-in loop?

本文关键字：相对 迭代 CSS JavaScript for-in 循环      更新时间：2023-09-26

我试图在循环的每次传递时增加一个左边距值。这是如何实现的？

这是JSFiddle，这是我正在尝试做的事情：

var myObj = {
    "dog":"pony",
    "sass":"tude",
    "war":"peace"
};
for (i in myObj) {
    $('#mainDiv').append("<p>" + i + "</p>");
    $('p').css("marginLeft","++20px");
}

如何让每个<p>标签比它前面的<p>标签多 20px？

更改

$('p').css("marginLeft","++20px");

自

$('p').each(function() {
    var thisp = $(this);
    thisp.css("marginLeft", thisp.css("marginLeft") + 20);
});

您可以在循环之外使用变量来跟踪递增的内容。如果我理解正确的话，您也没有在循环中正确获得正确的 p 标签。 

var myObj = {
    "dog":"pony",
    "sass":"tude",
    "war":"peace"
};
var lastMargin = 0;
for (i in myObj) {
    $('#mainDiv').append("<p class='"+i+"'>" + i + "</p>");
    lastMargin += 5;
    $("."+i).css("marginLeft",lastMargin+"px");
}

您显然可能希望将 ：nth-child 与 i 变量一起使用，而不是类。

创建一个保留计数的变量。

另外，只针对最后一个 p（最后一个添加）：

var myObj = {
        "dog":"pony",
        "sass":"tude",
        "war":"peace"
    },
    count = 0; 
for (i in myObj) {
    $('#mainDiv').append("<p>" + i + "</p>");
    $('p').last().css("marginLeft",(20 * count) + 'px');
    count++
}

小提琴 ： http://jsfiddle.net/3hxDK/4/

您似乎试图让每个后续段落都比上一个段落缩进更多？

如果是这样，您需要单独引用该段落。

var count = 0;
for (i in myObj) {
    $("<p>" + i + "</p>").
      css('marginLeft', count + "px").
      appendTo($('#mainDiv'));
    count += 20;
}
相关文章：