使用JavaScript的<ul><li>标签展示数据仅首条显示项目符号的问题

你的问题出在每次循环都重新创建了一个完整的<ul>标签——也就是说，每一条状态都会被包裹在独立的无序列表中，而不是把所有状态项放在同一个列表里。这就导致视觉上看起来只有第一条有项目符号（实际上每条都有，但各自是单独的列表，排版上容易让你误以为其他项没有）。

修改后的代码示例 #

var prjlist; 
var output; 
var proh; 
var statuss; 
var status;
// 先初始化数组存储所有状态列表项，只创建一次<ul>容器
var statusItems = [];

for (var i = 0; i < tabList.length; i++) { 
    for (var j = 0; j < responseText.length; j++) { 
        prjlist = responseText[j].projectDescription; 
        // 循环内只生成单个<li>项，避免重复创建<ul>
        statusItems.push('<li>'+ responseText[j].currentStatus + '</li>');
        
        proh = prjlist.replace(/&/g, '<br>'); 
        // 最后把所有<li>拼接后统一包裹在<ul>中
        status = '<ul>' + statusItems.join('') + '</ul>';
        
        var Obj = { 
            projectName: '<h3>'+ responseText[j].projectName +'</h3>', 
            projectDescription: '<p>'+ proh + '</p>', // 修正了原代码未闭合的<p>标签
            currentStatus: '<b>'+ "Current Status:" +'</b>' + '<br>'+ status 
        };
    } 
}

关键改动说明 #

• 新增statusItems数组来收集所有状态的<li>元素，避免每次循环都生成独立的<ul>标签
• 循环内仅生成单个列表项推入数组，最后统一用<ul>包裹所有项，确保所有状态属于同一个列表
• 顺便修复了原代码中<p>标签未闭合的小问题，避免潜在的排版异常

这样处理后，所有状态项都会被放在同一个无序列表内，每个项都会正常显示项目符号啦。

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