jQuery使用.load()附加数据而不是替换 [英] jQuery use .load() to append data instead of replace
问题描述
我如何具有load()的功能，但我想附加数据而不是替换.也许我可以改用get()，但是我只想从加载的数据中提取#posts元素
how can i have the functionality of load() except i want to append data instead of replace. maybe i can use get() instead but i want to just extract the #posts element from the loaded data
当我执行alert(data)时，我得到...
when i do an alert(data) i get ...
<!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()提取所需的元素.
There's no reason you can't extract the element you want using $.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);
});
您也许没有注意到上面的代码注释，所以在这里我将使其更加明确.
You perhaps didn't notice the code comments above, so I'm going to make it more explicit here.
如果#posts元素位于data中层次结构的顶部，换句话说，如果它没有父元素，则需要使用.filter().
If the #posts element is at the top of the hierarchy in data, in other words if it doesn't have a parent element, you'll need to use .filter() instead.
$.get('test.html',function(data) {
var posts = $(data).filter('#posts');
$('#container').append(posts);
});
根据以下评论，您似乎需要.filter()而不是.find().
Based on the comments below, you seem to need .filter() instead of .find().
原因是您要传入一个完整的HTML结构.当您执行此操作时，jQuery会将body标记的直接子代放置为jQuery对象中的数组.
The reason is that you're passing in an entire HTML structure. When you do that, jQuery places the direct children of the body tag as the array in the jQuery object.
jQuery的.filter()仅针对该数组中的节点进行过滤.不是他们的孩子.
jQuery's .filter() filters against only the nodes in that array. Not their children.
jQuery的.find()在数组中节点的后代中进行搜索.
jQuery's .find() searches among the descendants of the nodes in the array.
因此，您需要同时使用两者. .filter()在顶部获得正确的后代(#posts)，而.find()获得正确的后代(.next).
Because of this, you're needing to use both. .filter() to get the correct one at the top (#posts) and .find() to get the correct descendant (.next).
$(data).filter('#posts').find('.next');
这会将集合缩小到仅#posts元素，然后找到作为后代的.next元素.
This narrows the set down to only the #posts element, then finds the .next element that is a descendant.
这篇关于jQuery使用.load()附加数据而不是替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
