jQuery使用.load()来追加数据而不是替换

前端之家收集整理的这篇文章主要介绍了jQuery使用.load()来追加数据而不是替换前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我怎么能有load()的功能,除了我想附加数据而不是替换.也许我可以使用get()代替,但我想从加载的数据中提取#posts元素

UPDATE

当我做警报(数据)我得到…

<!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找到

解决方法

没有理由你不能使用$.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);
});

编辑:

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

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

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

编辑:

根据下面的评论,您似乎需要.filter()而不是.find().

原因是你传递的是整个HTML结构.当你这样做时,jQuery将body标签的直接子节点作为jQuery对象中的数组.

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

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

因此,您需要同时使用它们. .filter()在顶部获取正确的(#posts)和.find()以获得正确的后代(.next).

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

这会将设置缩小为仅仅#posts元素,然后查找作为后代的.next元素.

猜你在找的jQuery相关文章