尝试将获取的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用于文本插入，则可以安全地删除它们，因为可以在构造节点时插入文本。