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循环遍历数组并将元素追加到当前

使用jQuery从数组构建ul li

2 个答案: