jQuery use .load() to append data instead of replace
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
UP开发者_高级运维DATE
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>
the full code can be found @ pastebin
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);
});
EDIT:
You perhaps didn't notice the code comments above, so I'm going to make it more explicit here.
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);
});
EDIT:
Based on the comments below, you seem to need .filter() instead of .find().
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's .filter() filters against only the nodes in that array. Not their children.
jQuery's .find() searches among the descendants of the nodes in the array.
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');
This narrows the set down to only the #posts element, then finds the .next element that is a descendant.
To append using load:
jQuery('#Posts').append( jQuery('<div>').load(...) );
This will append whatever you load into the #Posts element.
$.get("YadaYadaYada.php", function(dat) {
$(dat).find("body > #posts").appendTo("#container");
});
try use $(this), something like :
<div id="result">Hello World </div>
<script>
$(function() {
$(this).load('templates/test2.html', function(result) {
$('#result').append(result);
});
});
</script>
加载中,请稍侯......
精彩评论