使 json 中的每个“li”都是自己的链接

要建立"链接"，大概您需要在每个li元素中都有一个锚元素，对于a元素，您希望具有数据中似乎没有href属性。但举个例子，假设你想使用 id 作为href你可以这样做：

$(document).ready(function(){
  var treeObj = {"root":[{"id":"1","trackName":"Whippin Post"},{"id":"2","trackName":"Sweet Caroline"},{"id":"3","trackName":"Tears in Heaven"},{"id":"4","trackName":"Ain't She Sweet"},{"id":"5","trackName":"Octopus' Garden"},{"id":"6","trackName":"Teen Spirit"},{"id":"7","trackName":"Knockin on Heaven's Door"}]};
  var $ul = $("<ul></ul>");       
  $.each(treeObj.root,function(i,v) {
    $ul.append($("<li></li>").append(
                              $("<a></a>").attr("href",v.id).html(v.trackName)));
  });
  $("#tree").append($ul);
});

您的问题被标记为"jQuery"，所以我继续使用 jQuery 创建了列表(每个 li 内都有锚点(。$.each()"循环"遍历treeObj.root数组中的每个元素，创建一个带有id和trackName的元素，将其附加到新的 li 元素，并将其附加到 ul 元素。.each()完成后，新的 ul 将附加到您的树div 中。

至于链接的样式，这取决于你想要的CSS，但是由于你提到删除文本装饰，你可能想从这样的东西开始：

#tree a { text-decoration : none; }

工作演示：http://jsfiddle.net/B2Zsv/

(如果小提琴中显示的代码和输出不是您要查找的那种东西，我建议您更新问题以显示要生成的所需输出 html。

更新

我的原始代码上的以下变体将曲目名称存储为创建的定位点上的属性，然后在单击时检索它们。

$(document).ready(function(){
    var treeObj = {"root":[{"id":"1","trackName":"Whippin Post","trackFile":"test1.wma"},{"id":"2","trackName":"Sweet Caroline","trackFile":"test2.wma"},{"id":"3","trackName":"Tears in Heaven","trackFile":"test3.wma"},{"id":"4","trackName":"Ain't She Sweet","trackFile":"test4.wma"},{"id":"5","trackName":"Octopus' Garden","trackFile":"test5.wma"},{"id":"6","trackName":"Teen Spirit","trackFile":"test6.wma"},{"id":"7","trackName":"Knockin on Heaven's Door","trackFile":"test7.wma"}]};
    var $ul = $("<ul></ul>");       
    $.each(treeObj.root,function(i,v) {
        $ul.append(
            $("<li></li>").append( $("<a></a>").attr({
                "href":v.id,"data-file":v.trackFile}).html(v.trackName) )
        );
    });
    $("#tree").append($ul);
    $("#tree a").click(function() {
      var trackname = $(this).html(),
          filename = $(this).attr("data-file");
      // here add your code to do something with filename and/or trackname
      return false;
    });
});

如您所见，我的点击处理程序在获得文件名后实际上并没有对文件名执行任何操作(我更新的演示 http://jsfiddle.net/B2Zsv/3/显示它(，但这向您展示了如何获取正确的文件名，以便从那里您可以弄清楚如何播放它......

首先在 js 中创建链接：

function to_ul(id) {
  var ul = document.createElement("ul");
  for (var i=0, n=id.length; i<n; i++) {
    var branch = id[i];
    var li = document.createElement("li");
    li.innerHTML = "<a href='wherever' class='listAnchor'>" + branch.trackName + "</a>"
    ul.appendChild(li);
  }
  return ul;
}

然后在 CSS 中设置它的样式：

<style>
  .listAnchor {
    text-decoration: none;
  }
</style>

要在li元素中创建a元素，只需应用代码中演示的相同技术：

函数 to_ul(id( {

var ul = document.createElement("ul");
for (var i = 0, n = id.length; i < n; i++) {
    var branch = id[i];
    var li = document.createElement("li"),
        a = document.createElement('a'); // create the `a`
    a.href = "http://example.com/"; // set the `href`
    var text = document.createTextNode(branch.trackName);
    a.appendChild(text); // append text to the a
    li.appendChild(a); // append the a to the li
    ul.appendChild(li);
}
return ul;

}

JS小提琴演示。

要设置该链接的样式，您可以在文档中或外部样式表中使用 CSS(与任何其他 CSS 一样(：

li a:link,
li a:visited {
    /* style the link's 'default' state */
}
li a:hover,
li a:active,
li a:focus {
    /* style the 'interactive' states of the links */
}

JS小提琴演示。

当然，您可以简单地在创建所述元素的 JavaScript 中直接应用样式，尽管这是不必要的昂贵：

/* all the other stuff removed, for brevity */
    var li = document.createElement("li"),
        a = document.createElement('a'); // create the `a`
    a.href = "http://example.com/"; // set the `href`
    a.style.color = '#000';
    a.style.textDecoration = 'none';
    /* ...and other stuff... */

JS小提琴演示。

这种方法除了昂贵之外，还缺乏:hover、:active、:visited和:focus风格的能力。