如何使用 .load 将 li 附加到当前 ul？答案

【问题标题】：How to I append li's to a current ul using .load?如何使用 .load 将 li 附加到当前 ul？
【发布时间】：2012-06-28 08:37:24
【问题描述】：

我正在搜索 amd 我有以下代码行：

 $('#searchResults').add($('li:last').load(url + '&' + urlExtra));

这会添加 10 个带有内容的 li 标签，但不是将其添加到 ul 中，而是将最后一个 li 与加载的列表嵌套在一起。为了尝试澄清，我想要这样的结果：

<ul>
<li>already in list</li>
<li>already in list</li>
<li>already in list</li>
<li>already in list</li>
<li>new li from load</li>
<li>new li from load</li>
</ul>

但我明白了：

    <ul>
    <li>already in list</li>
    <li>already in list</li>
    <li>already in list</li>
    <li>already in list
       <li>new li from load</li>
       <li>new li from load</li>
    </li>
    </ul>

任何正确方向的指针将不胜感激。

亲切的问候雷切尔

【问题讨论】：

jQuery 有 before 和 after 这样的方法，所以如果你找到了最后一个 li，你应该在 api.jquery.com/after 之后添加你的 li

标签： jquery append add

【解决方案1】：

请改用jQuery.get()：

$.get(url + '&' + urlExtra,function(data) {
   $('#searchResults').append('<li>' + data + '</li>');
})

#searchResults 在我的例子中是ul。这使用.append() 将新的li 添加到ul 的末尾

【讨论】：

【解决方案2】：

jQuery 的load() 函数 - 用下载的内容替换 父级的内容。在您的代码中，加载调用的父级是您的最后一个li，而不是ul。您需要的是将内容附加到父级而不是替换它的东西。所以理论上，load() 不能为你做这件事。使用 .ajax() 或 .get() 之类的内容来获取内容，然后将其附加到您的父级 ul

【讨论】：

它真的替换了内容吗？ API没有明确说明这一点，并且基于问题中的问题，它似乎附加到了已经存在的内容中。 already in list 还在（虽然我不知道这是否只是一个标签）<li>already in list <li>new li from load</li> <li>new li from load</li> </li>
@nbrooks - 在您的代码中，加载调用的父级是最后一个 li （顺便说一下，内容“已经在列表中”） - 这是 li 用 @ 解决的987654332@选择器。
@techfoobar 是的，它正在将新数据加载到最后一个li，但文本already in list——之前大概在那里——在加载新数据后似乎仍然存在
@nbrooks - 啊。行。现在我明白了。这很奇怪。我的理解是它会清除父级的整个innerHTML。我想我需要对此进行试验。您使用的是哪个版本的 jQuery？
@techfoobar 我指的是上面的问题，而不是我遇到的问题。我从来没有尝试过加载非空的东西，所以我只是好奇。我认为您可能是对的，但可能只是一个错字

【解决方案3】：

不加到最后一个li，为什么不加到ul本身呢？

【讨论】：

【解决方案4】：

尝试将新的“li”附加到 ul：

$('#searchResults ul').append("<li>asdasdasd</li>");

【讨论】：

这适用于规范，但我没有加载静态内容，我需要一种机制来使用 .load 方法添加内容。
$('#searchResults').add($('这个选择器给我带来了问题').load(url + '&' + urlExtra));
可以追加一个空的li并用load函数更新内容，$('#searchResults ul').append("<li id='someuniqueid'></li>"); $('#someuniqueid').load(url + '&' + urlExtra);load的返回只会是li的内容

【解决方案5】：

不妨试试：

$.get('foo.html', function(data) {
    $('#results').append(data);
});

HTML：

<ul id="results">
    <li>Item 1</li>
</ul>

foo.html：

<li>New item</li>

结果：

<ul id="results">
<li>Item 1</li>
<li>New item</li>
</ul>

【讨论】：