如何将数组元素分别作为class值生成独立的div元素？

修改后可直接运行的代码 #

$(document).ready(function () {
   var arr = ['top', 'right', "Bottom", "left"]
   // 存储所有生成的div HTML片段
   var directionHtml = "";
   $.each(arr, function (index, value) {
       // 单次循环生成对应class和内容的独立div，追加到片段中
       // 如需统一class大小写，可把value替换为value.toLowerCase()，适配你示例的小写class要求
       directionHtml += `<div class="${value}">${value}</div>`
   });
   // 把所有生成的div插入到对应容器中
   $("#directionSec").html(`<div class='directionMain'><span class='directionHeader'><h5>Header</h5><div id='result'>${directionHtml}</div></span></div>`);
})

核心修改逻辑 #

• 废弃原拼接数组文本的逻辑，改为遍历数组时直接生成每个元素对应的独立div结构
• 所有生成的div批量插入到页面容器中，无需额外调整原有外层布局结构
• 若不需要外层#result容器，直接删除对应代码里的<div id='result'>和对应的闭合标签即可

内容的提问来源于stack exchange，提问作者user10955924