嘗試將獲取的JSON數據追加到字段中，但這不起作用

Question

我試圖遍歷JSON，然后將每個單詞附加到帶有id eenwoordlol[ + ID123 +] col-md-9上，但這是行不通的。

var ID123 = 0;

function createExercise(json) {
  const exercises = json.main_object.main_object.exercises;
  exercises.forEach(function(exercise) {
  console.log(exercise.word);

var exer = ($('<div/>', {
    'class': 'row'
}));

var mainCol3 = ($('<div/>', {
    'class' : 'col-md-3'
})).append($('<div/>', {
    'class': 'row'
})).append($('<div/>', {
    'class': 'col-md-3'
})).append($('<div/>', {
    'class': 'col-md-9',
    'id' : 'eenwoordlol[' + ID123 + ']'
}));

var mainCol9 = ($('<div/>', {
    'class': 'col-md-9'
}));

$('#eenwoordlol').val(exercise.word);

exer.append(mainCol3);
exer.append(mainCol9);
exer.append('<br/>');
$("#exerciseField").append(exer);
 });
}

HTML代碼：

<div class="exerciseField" id="exerciseField">

</div> <!-- end of exerciseField-->

console.log()確實顯示了我的JSON文件中有一個單詞（我知道循環可以正常工作，並且確實可以提取，但是似乎無法顯示它），但是它沒有顯示任何給定的錯誤。 那我錯過了什么呢？

Answer 1

$('#eenwoordlol')找不到任何東西，因為實際的ID是#eenwoordlol[0] 。 如果要在CSS選擇器中選擇此選項，則需要轉括號。

val也用於輸入，請使用text()設置文本內容：

$('#eenwoordlol\[0\]').text(exercise.word);

但是，這將不起作用，因為該元素甚至不在DOM中。 我建議添加一個變量，而不是立即附加並稍后執行第二次查找：

var content = $('<div/>', {
    'class': 'col-md-9',
    'id' : 'eenwoordlol[' + ID123 + ']'
});
content.text(exercise.word);

var mainCol3 = ($('<div/>', {
    'class' : 'col-md-3'
})).append($('<div/>', {
    'class': 'row'
})).append($('<div/>', {
    'class': 'col-md-3'
})).append(content);

var mainCol9 = ($('<div/>', {
    'class': 'col-md-9'
}));

Answer 2

四個問題：

• .val()用於輸入字段和文本區域； 將文本插入到常規dom節點中，請使用.text()或.html() 。
• 您試圖在不存在的DOM節點'#eenwordlol'上設置val() 。
• 您永遠不會增加ID變量，從而導致ID重復。
• 構建這些DOM節點的方式不正確。 編輯：我已經對此進行了更新，以匹配您描述的預期結構：

用col 3和col 9創建一個主行，在col 3中，我用col 3和col 9創建另一行（在col 9上將附加單詞，col 3是音頻按鈕），然后我有了col 9左邊，在那我想創建4次col 3

 var ID123 = 0; // You probably don't want to use a global variable for this, but let that slide for now var fakejson = { // extrapolating this based on the code main_object: { main_object: { exercises: [{ word: "one" }, { word: "two" }, { word: "three" } ] } } } function createExercise(json) { const exercises = json.main_object.main_object.exercises; exercises.forEach(function(exercise) { var exer = $('<div/>', { 'class': 'row' }) .append( $('<div/>', { 'class': 'col-md-3' }) .append( $('<div/>', { 'class': 'row' }) .append($('<div>', { class: 'col-md-3', text: "(button here)" })) .append($('<div>', { class: 'col-md-9', 'id': 'eenwoordlol[' + ID123 + ']', // note the brackets will need to be escaped in later DOM queries text: exercise.word })) ) ).append( $('<div>', { class: 'col-md-9', text: "(4 x col-3 here)" }) ); $("#exerciseField").append(exer); ID123++; }); } createExercise(fakejson); 

 div { /* Just to make structure visible */ border: 1px solid; padding: 2px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="exerciseField" id="exerciseField"> </div> 

老實說，這是一個足夠復雜的結構，與其直接嵌套所有這些.append()規則，不如直接寫出html字符串可能會更好：

var exer = $('<div class="row"><div class="col-md-3">' + exercise.word + '</div>...etc...</div>');

如果在此功能中僅將eenwoordlol[...] ID用於文本插入，則可以安全地刪除它們，因為可以在構造節點時插入文本。