【问题标题】：jQuery use .load() to append data instead of replacejQuery 使用 .load() 追加数据而不是替换
【发布时间】：2013-04-09 03:07:55
【问题描述】：

我怎样才能拥有load() 的功能，除非我想追加数据而不是替换。也许我可以改用get()，但我只想从加载的数据中提取#posts元素

更新

当我执行alert(data) 时，我得到...

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="jquery.infinitescroll.js"></script>
  <script>

  </script>
</head>
<body>
  <div id="info"></div>
  <div id="posts">
    <div class="post"> ... </div> 
    ...
  <ul id="pageNav" class="clearfix">
    <li><a href="page1.html">1</a></li>
    <li><a href="page2.html">2</a></li>
    <li><a href="page3.html">3</a></li>
    <li><a href="page4.html">4</a></li>
    <li><a href="page5.html">5</a></li>
    <li><a href="page3.html" class="next">next</a></li>  
  </ul>

完整代码可见@pastebin

【问题讨论】：

标签： jquery

【解决方案1】：

你没有理由不能使用$.get()提取你想要的元素。

$.get('test.html',function(data) {
    var posts = $(data).find('#posts');
       // If the #posts element is at the top level of the data,
       //    you'll need to use .filter() instead.
       // var posts = $(data).filter('#posts');
    $('#container').append(posts);
});

编辑：

您可能没有注意到上面的代码 cmets，所以我将在这里更明确地说明。

如果#posts 元素位于data 的层次结构的顶部，换句话说，如果它没有父元素，则需要使用.filter()。

$.get('test.html',function(data) {
    var posts = $(data).filter('#posts');
    $('#container').append(posts);
});

编辑：

根据下面的 cmets，您似乎需要 .filter() 而不是 .find()。

原因是您传递的是整个 HTML 结构。当您这样做时，jQuery 会将 body 标记的直接子代作为数组放置在 jQuery 对象中。

jQuery 的.filter() 仅过滤该数组中的节点。不是他们的孩子。

jQuery 的.find() 在数组中节点的后代中搜索。

因此，您需要同时使用两者。 .filter() 得到正确的顶部 (#posts) 和 .find() 得到正确的后代 (.next)。

$(data).filter('#posts').find('.next');

这会将集合缩小到仅#posts 元素，然后找到作为后代的.next 元素。

【讨论】：

您甚至可以在线编写它：$('#container').append($('#posts', data)); --- 并不是您的示例执行此操作，但要注意在此回调中多次调用 $(data)/$('#posts',data)！这可能是一大堆不需要的处理/内存......
@gnarf - 实际上$("#posts", data).appendTo("#container"); 会少一些浪费:)
@Nick - jQuery 不只是将其翻转为 .append() 吗？ github.com/jquery/jquery/blob/1.4.2/src/manipulation.js#L445
@jAndy - 我认为这是一个见仁见智的问题...“在数据中找到#posts，将其附加到#container”...对我来说，这更多可读。您认为“获取数据，在其中查找帖子，然后查找容器，将之前找到的帖子附加到其中”更好吗？ :)
@jiewmeng - 你注意到我关于使用.filter() 的代码注释了吗？如果您想要的元素位于顶层，这意味着它在data 中没有父元素，则需要使用.filter() 而不是.find()。我会更新我的答案以使其更清楚。

【解决方案2】：

使用负载追加：

jQuery('#Posts').append( jQuery('<div>').load(...) );

这会将您加载的任何内容附加到#Posts 元素中。

【讨论】：

【解决方案3】：

$.get("YadaYadaYada.php", function(dat) {
   $(dat).find("body > #posts").appendTo("#container");
});

【讨论】：

【解决方案4】：

尝试使用 $(this)，例如：

<div id="result">Hello World </div>
    <script>
    $(function() {
            $(this).load('templates/test2.html', function(result) {
                $('#result').append(result);
            });
        });
    </script>

【讨论】：

这会将document 的内容替换为该页面......你真的不想做这样的事情，在这种情况下他需要.load() 以外的东西。