爲什麼重複循環輸出相同的記錄？ JavaScript的

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

OUTPUT：

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

（爲什麼這三位來自第二循環也是第一）

*Kako se zove najveci bruger king* 
burger12 
burger13 
burger14 

Answer 1

的問題是，每一個附加div元素與類pitanje您的外循環的每一次迭代：

$("#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的有效孩子。