Question

我正在尝试使用代码在javascript中使用<ul><li>标记列出数据。但子弹只显示在第一个数据中而不是所有数据中。

  var prjlist;
    var output; 
    var proh;
    var statuss;
    var status;


    for (var i = 0; i < tabList.length; i++) {
        for (var j = 0; j < responseText.length; j++) {          


      prjlist= responseText[j].projectDescription;
      statuss= '<ul><li>'+ responseText[j].currentStatus + '</li></ul>';

     /*  output= prjlist.split("&");
      proh=output.join("/n");
       */
     proh=prjlist.replace(/&/g, '<br>');
     status =statuss.replace(/&/g, '<br>');

            var Obj = {

                projectName: '<h3>'+ responseText[j].projectName +'</h3>',

                projectDescription: '<p>'+ proh + '<p>',


                 currentStatus: '<b>'+ "Current Status:" +'</b>' + '<br>'+  status 
                }

我正在从DB获取当前状态值的输出。

Answer 1

您在<ul>循环的每次迭代中渲染for。

您应该呈现<ul>一次（在循环开始之前），然后在循环内呈现<li>，然后在循环之后关闭</ul>标记。

e.g。

var statuss = '<ul>';

for () {
   statuss += '<li>'+ responseText[j].currentStatus + '</li>';
}

statuss += '</ul>';

完整代码：

var prjlist;
var output;
var proh;
var statuss = '<ul>';
var status;

for (var i = 0; i < tabList.length; i++) {
  for (var j = 0; j < responseText.length; j++) {
    prjlist = responseText[j].projectDescription;
    statuss += '<li>' + responseText[j].currentStatus + '</li>';

    /*  output= prjlist.split("&");
     proh=output.join("/n");
      */
    proh = prjlist.replace(/&/g, '<br>');
    status = statuss.replace(/&/g, '<br>');

    var Obj = {
      projectName: '<h3>' + responseText[j].projectName + '</h3>',
      projectDescription: '<p>' + proh + '<p>',
      currentStatus: '<b>' + "Current Status:" + '</b>' + '<br>' + status
    }
  }
}

statuss += '</ul>';

对于这些类型的问题，我建议使用现代浏览器中提供的开发人员工具进行故障排除。例如，在Chrome中使用Inspect元素非常有用，您可以很快发现它。

Answer 2

由于您的代码信息很少。我和Anniket有同样的假设。还有 projectDescription: ''+ proh + '' ，因为你没有正确关闭 。请提供一个jsfiddle，因为Aniket建议有更好的图片。

Answer 3

您使用replace()方法的行，您正在添加 代码。

 标记的功能是在下一行移动内容。

因此，<UL>标记会在每个<LI>内容之前放置一个项目符号，但是您明确地将其分解为移动到下一行，因此只能看到一个项目符号。

<ul>
  <li>Coffee <br> Bread</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

请参阅上面代码的输出。 !!

未使用javascript中的<ul> <li>标记列出数据

3 个答案: