Question

我试图在每次循环时增加一个margin-left值。这是如何实现的？

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

创建一个保持计数的var。

此外，仅针对最后一个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;
}

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

4 个答案: