如何使用 For 循环在 JQuery 中制作多个 HTML 标签？答案

【问题标题】：How Would I Make Multiple HTML Tags In JQuery Using a For Loop?如何使用 For 循环在 JQuery 中制作多个 HTML 标签？
【发布时间】：2021-08-10 16:08:25
【问题描述】：

我正在尝试使用 JQuery 创建一个动态选项列表，但是当我运行代码时，n 个选项标记中只有一个选项标记（n 是任何真正的正整数）。这是一个示例数组：

我的代码：

$.getJSON('http://localhost:3006/search', function(data){
   alert(data.names.length);
   var i;
   var arrLen = data.names.length; //In this case, the names array up top
   for(i = 3; i < arrLen; i++){
      $('#name').append($('<option></option>').text(data.names[i][0]).val(data.names[i][0]));
   }
});

我不断得到数组中的最后一个选项标签，但没有别的......

【问题讨论】：

你已经设置了i=3，所以你要求 for 循环跳过前 3 个条目
我刚刚意识到，这是从之前的测试中得到的……谢谢！我现在觉得很傻。

标签： javascript html jquery dynamic

【解决方案1】：

这里有一些问题。首先主要问题是你在循环中设置了i = 3，所以你从数组的第4个元素开始，而不是第一个。

其次，正确的 jQuery 方法是 val()，而不是 value()，并且您需要在第一个 append() 上使用 text() 链接该调用，而不是创建两个单独的 option 元素。试试这个：

let data = {
  names: ['John Doe', 'Jane Doe', 'Stephan Doe', 'Emily Doe']
}

// in your AJAX callback:
for (var i = 0; i < data.names.length; i++) {
  $('#name').append($('<option></option>').text(data.names[i]).val(data.names[i]));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="name"></select>

顺便说一句，您可以通过使用 map() 创建一个 HTML 字符串数组来一次性附加到 DOM，而不是创建一个在每次迭代中附加到 DOM 的全新 jQuery 对象，从而提高代码的性能循环：

let data = {
  names: ['John Doe', 'Jane Doe', 'Stephan Doe', 'Emily Doe']
}

// in your AJAX callback:
let options = data.names.map(n => `<option value="${n}">${n}</option>`);
$('#name').append(options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="name"></select>

【讨论】：

【解决方案2】：

这是我的代码。希望对你有帮助
HTML 部分：-

<select id="main"></select>

JS部分：-

$(document).ready(function(){
  let main = $("#main");
  let optionText = ['Option1','Option2','Option3'];

  optionText.forEach(index => {
    let html = `<option>${index}</option>`;
    main.append(html);
  });
});

【讨论】：