1

我有以下代码：

$.getJSON('/api/video/',
      function (resp) {
          $("body").append("<ul/>");

          $.each(resp, function (key, value) {
              $("ul").append("<li/>").append(
                  $("<a/>", {
                      href: value.url,
                      html: value.title
                  }));
          });
      });

它产生：

...
<ul>
    <li></li>
    <a href="http://vimeo.com/1234567">How to Connect a Mobile Broadband Antenna to Data Card</a>
    <li></li>
    <a href="http://www.youtube.com/watch?v=q4Oknc8onG8">40000mW Laser vs. Line of Balloons!!</a>
</ul>
...

正如你所看到的<a/>，不在里面<li/>，我的问题是为什么（这种行为有充分的理由还是只是这样工作）？在我的世界里面$("ul").append("<li/>").append($("<a/>", ...))加了一个。我认为它在无序列表内部创建了一个，并且下一个附加操作对该项目进行操作，因此应该在其中添加链接。然而事实并非如此，我想知道这是否有原因？<a/><li/>$("ul").append("<li/>")<li/><li/>

我非常感谢您抽出时间来回答我的问题！

4

2 回答 2

4

该.append()函数不会更新 jQuery 对象引用的元素，因此当您调用第二个时.append()，它仍然会针对该<ul>元素调用。

你可以像这样重组它：

$('<li/>').append('<a/>', {
    href: value.url,
    title: value.title
}).appendTo('ul');
于 2013-02-18T22:09:51.920 回答
1

$.append()返回附加到的项目，而不是附加的项目。

于 2013-02-18T22:09:17.647 回答