同时创建和链接动态元素

Question

我正在创建两个元素: foo和bar，我需要同时链接这两个元素。

<div class="target-1"></div>
<div class="target-2"></div>
<form>
    <input type="text" />
    <button type="submit">Submit</button>
</form>

这些是创建的元素的目标。下面是js：

var index = 0;
$("form").submit(function(){
  $(".target-1").append(
    $("<span/>", {class: "foo", id: "s-" + index++}));
  $(".target-2").append(
    $("<span/>", {class: "bar s-" + index}));
});

现在，这意味着在target-1内创建一个id为"s-n“的span.foo，同时在target-2内创建另一个span.bar，其类为"s-n”，与span.foo的id完全相同。

它实际做的是创建span.foo id="s-0“和span.bar class="s-1”。我不明白为什么，因为我在第一个追加中增加了index，然后在第二个追加中设置了index的当前状态。

这是一个fiddle http://jsfiddle.net/Yrrfd/，但我只使用了按钮，没有表单，因为你不能在jsfiddle中提交表单。但是它应该是一样的，你可以看到不同的索引值。

Answer 1

如果要在赋值后递增索引，则需要使用++index而不是index++

$(".target-1").append(
    $("<span/>", {class: "foo", id: "s-" + ++index})); // Here
  $(".target-2").append(
    $("<span/>", {class: "bar s-" + index}))
});

Fiddle

Post-Increment运算符将首先赋值，然后递增。您需要预增量运算符。

Answer 2

您应该使用++index而不是index++。

index++会给出这个值，然后递增。++index会递增该值，然后给出该值。

Answer 3

您应该使用++index，这样索引就会递增，然后再使用。以下是更新后的小提琴：http://jsfiddle.net/Yrrfd/5/