Question

我有以下代码：

$.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/>项进行操作，因此应在其中添加链接。然而事实并非如此，我想知道是否有理由这样做？

我非常感谢您花时间回答我的问题！

Answer 1

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

你可以这样重组：

$('<li/>').append('<a/>', {
    href: value.url,
    title: value.title
}).appendTo('ul');

Answer 2

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

关于jquery附加行为

2 个答案: