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}));
});

现在这意味着在id为“sn”的target-1中创建一个span.foo，同时在target-2中创建另一个span.bar，其类“sn”与span.foo的id。

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

这是一个小提琴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

增量后运算符将先分配然后递增。您需要预增量运算符。

Answer 2

您应该使用++index代替index++。

index++为您提供值，然后递增它。 ++index递增它，然后为您提供值。

Answer 3

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

Answer 4

我不确定我100％理解您的要求，但我认为您需要将其更改为

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

或者

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

Answer 5

在第一次索引值是（0）和索引++（首先使用然后递增）所以它将使用0然后递增1并继续bar，现在是1.

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

所以你需要在bar append函数处增加你的索引变量。

同时创建和链接动态元素

5 个答案: