遍历数组并在 <ul> 中作为 <li> 追加答案

【问题标题】：Loop through array and append inside <ul> as <li>遍历数组并在 <ul> 中作为 <li> 追加
【发布时间】：2015-05-14 05:26:52
【问题描述】：

我希望输出是这样的。
当我循环遍历数组对象时，我得到这样的输出。第一个 LI 标记被附加到下一个 LI 标记。

这是我的数组输出：

Object { AUSTRALIA: "http://au.com# AU,http://mcg.com# MCG", INDIA: "http://kp.com# KP,http://ap.com# AP,http://tg.com# TG", PAKISTAN: "http://PK.COM# PK,http://POL# POL", USA: "http://UU# UU,http://PHL.com# PHL" }.

下面是相同的代码。

for (var category in clientData)
                     {
                         var category_attr;
                         category_attr = clientData[category];
                         category_attr = category_attr.split(",");

                          html = "<ul>" + category.trim() + "</ul>";
                         for(var i=0; i<category_attr.length; i++)
                         {
                             var temp = category_attr[i].split("#");
                             var url = temp[0].trim();
                             var urldesc = temp[1].trim();
                              liHtml += "<li>"+
                                     "<a href='" +url +"'>"+urldesc+""+"</a>"+
                                  "</li>";  
                         }
                         html = html + liHtml;
                         $("#tasksUL").append(html);
                     }
                       //$("#tasksUL").append(html); 
                    }
        });

}
</script>
<div id="tasksUL" ></div>

输出图像c

【问题讨论】：

“当我循环遍历 JSON 数组对象时...” 如果您循环遍历它，则它不是 JSON。 JSON 是一种文本符号。如果你循环遍历它，它只是一个数组，与 JSON 没有任何关系。
谢谢 TJ。那么我可以遍历数组并将其分配给 UL 和 LI

标签： javascript jquery html css arrays

【解决方案1】：

我能够像下面这样实现这一点

   for (var category in clientData)
                         {
                             var category_attr = [];
                            // console.log(category);
                             category_attr = clientData[category];
                             category_attr = category_attr.split(",");
                            // console.log(category_attr);
                              html = "<div style='float: left'><ul><li class='list-view'>" + category.trim() + "</li>";
                             liHtml = "";
                             for(var i=0; i<category_attr.length; i++)
                             {
                                 var temp = category_attr[i].split("#");
                                 var url = temp[0].trim();
                                 var urldesc = temp[1].trim();
                                  liHtml += "<li>"+
                                         "<a href='" +url +"'>"+urldesc+""+"</a>"+
                                      "</li>";  
                             }
                             html = html + liHtml + "</ul></div>";
                             $("#tasksUL").append(html);
                         }

                        }
<style type="text/css" >    
#tasksUL ul{  width:350px;  }
#tasksUL ul li{ list-style: inside none square !important; padding-left:10px !important;   }
.list-view { background: #005898 !important; padding:2px; color:#FFF !important;   }
</style>
<div id="tasksUL" ></div>

【讨论】：