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

Question

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

这是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？

Answer 1

改变

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

到

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

Answer 2

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

此外，只针对最后一个 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/

Answer 3

您可以在循环外使用变量来跟踪递增的内容。如果我对您的理解正确，您也没有在循环中正确获得正确的 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 变量而不是类一起使用。

Answer 4

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

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

var count = 0;

for (i in myObj) {
    $("<p>" + i + "</p>").
      css('marginLeft', count + "px").
      appendTo($('#mainDiv'));

    count += 20;
}