循环遍历数组并作为<li> </li> </ul>附加在<ul>中

Question

我希望out out是这样的。
当我循环遍历数组对象时，我得到了像这样的输出。其中第一个LI标签被引用到Next 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>

输出Imagec

Answer 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>