使用 jQuery 从数组构建 ul li

Question

我得到了一个如下所示的数组：

var myArray = {
    "ABC.txt": "1",
    "AD.txt": "2",
    "uploads/": "1",
    "uploads/Penguins.jpg": "1",
    "uploads/Tulips.jpg": "2",
    "morefiles.txt": "2"
};

我正在尝试像这样使用ul li：

<ul>
  <li>
    <a href="ABC.txt" pos="1">ABC.txt</a>
  </li>
  <li>
    <a href="AD.txt" pos="2">AD.txt</a>
  </li>
  <li rel="folder">
    <a href="uploads/" pos="1">uploads</a>
    <ul>
      <li>
        <a href="uploads/Penguins.jpg" pos="1">Penguins.jpg</a>
      </li>
      <li>
        <a href="uploads/Tulips.jpg" pos="2">Tulips.jpg</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="morefiles.txt" pos="2">morefiles.txt</a>
  </li>
</ul>

我正在尝试使用 jQuery 将其变为 UL LI，但实际上我什么都没有，只是一些代码碎片，甚至没有任何值得放在这里的东西。

请大家帮忙。

Answer 1

看起来您需要某种模板引擎。查看ICanHaz，您可以在其中获得类似的内容：

<script id="user" type="text/html">
  <li>
    <p class="name">Hello I'm {{ name }}</p>
    <p><a href="http://twitter.com/{{ twitter }}">@{{ twitter }}</a></p>
  </li>
</script>

初始化脚本很简单：

var user = ich.user(user_data_object)

另外，本文Client-Side Templating 将为您解释以下内容：

<h1>{{title}}</h1>
<ul>
    {{#names}}
        <li>{{name}}</li>
    {{/names}}
</ul>

除此之外：

var data = {
    "title": "Story",
    "names": [
        {"name": "Tarzan"},
        {"name": "Jane"}
    ]
}

要转换成这个：

<h1>Story</h1>
<ul>
    <li>Tarzan</li>
    <li>Jane</ul>
</ul>

Answer 2

首先变量 myArray 不是数组，数组是在 [ ] 中定义的，所以它应该看起来像这样

var myArray = [{"ABC.txt" : "1"}, {"AD.txt" : "2"}, {"uploads/" : "1"}, {"uploads/Penguins.jpg" : "1"}, {"uploads/Tulips.jpg" : "2"},{"morefiles.txt" : "2"}];

但是要在您的问题中生成 html，您最好使用以下结构：

var myArray = [
    {
        "href":"ABC.txt",
        "pos" : "1"
    },{
        "href":"AD.txt",
        "pos":"2"
    },
    ...etc
];

然后使用另一个内部数组生成嵌套的

然后，您可以使用 for 循环遍历数组并随时将元素附加到