Question

我有一些测试数据：

var $data = {
  "pitanje": [{
    "id": 1,
    "naziv": 'Kako se zove najveci bruger',
    "odgovori": [{
      "id": "1",
      "ime": "burger1",
      "tip": "netacno"
    }, {
      "id": "2",
      "ime": "burger2",
      "tip": "netacno"
    }, {
      "id": "3",
      "ime": "burger3",
      "tip": "tacno"
    }, {
      "id": "4",
      "ime": "burger4",
      "tip": "netacno"
    }]
  }, {
    "id": 2,
    "naziv": 'Kako se zove najveci bruger king',
    "odgovori": [{
      "id": "1",
      "ime": "burger12",
      "tip": "netacno"
    }, {
      "id": "2",
      "ime": "burger13",
      "tip": "netacno"
    }, {
      "id": "3",
      "ime": "burger14",
      "tip": "tacno"
    }],
  }]
};

FOR - LOOP：

for (var i = 0; i < $data.pitanje.length; i++) {
  $("#kviz").append("<div class='pitanje col-md-12'><h1>" + $data.pitanje[i]['naziv'] + "</h1></div>");

  for (var x = 0; x < $data.pitanje[i]['odgovori'].length; x++) {
    $(".pitanje").append("<li class='odgovor col-md-3'><div data-pitanjeid=" + 
        $data.pitanje[i]['id'] + 
        " data-odgovorid=" + 
        $data.pitanje[i]['odgovori'][x]['id'] +
        ">" + 
        $data.pitanje[i]['odgovori'][x]['ime'] + 
        "</div></li>");
    // console.log($data.pitanje[i]['odgovori'][x]);
  };
};

输出：

--Kako se zove najveci bruger--
burger1
burger2
burger3
burger4
**burger12** 
**burger13** 
**burger14**

（为什么这三个来自第二个循环也是第一个）

*Kako se zove najveci bruger king*
burger12
burger13
burger14

Answer 1

问题是每个外部循环的每次迭代都会附加一个带有类pitanje的div元素：

$("#kviz").append("<div class='pitanje col-md-12'><h1>" + $data.pitanje[i]['naziv'] + "</h1></div>");

在内部循环中，您查询$(".pitanje")。在第一个循环的第二次迭代中，这将找到您创建的两个div，并将添加将数据附加到它们两者。

你需要写下这样的东西：

for (var i = 0; i < $data.pitanje.length; i++) {
  var elementToAppendTo = $("<div class='pitanje col-md-12'><h1></h1><ul></ul></div>");
  elementToAppendTo.find('h1').text($data.pitanje[i]['naziv']);

  $("#kviz").append(elementToAppendTo);

  for (var x = 0; x < $data.pitanje[i]['odgovori'].length; x++) {
    var newItem = $("<li class='odgovor col-md-3'><div></div></li>")
    newItem.find('div').data({
      pitanjeid: $data.pitanje[i]['id'],
      odgovorid: $data.pitanje[i]['odgovori'][x]['id']
    }).text($data.pitanje[i]['odgovori'][x]['ime'])
    elementToAppendTo.find('ul').append(newItem);
    // console.log($data.pitanje[i]['odgovori'][x]);
  }
}

附加说明：li元素不是ul的有效子元素。

为什么循环输出重复相同的记录？ JavaScript的

1 个答案: