jQuery .load 可以追加而不是替换吗？

Question

我安装了 WordPress，并尝试使用 jQuery 创建“加载更多”效果。我在使用页面片段的基本 .load 功能时遇到一些问题。我不介意使用 .get，因为我在这里看到一些线程认为这是一个更好的解决方案。

这是我的页面 URL 结构和内容：

第一页：http://example.com/page/1/

HTML：

<div id="articles">
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
</div>

第二页：http://example.com/page/ 2/

HTML：

<div id="articles">
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
</div>

我在页面底部有一个链接，我尝试执行以下操作：

jQuery(#articles).load('http://example.com/page/2/ #articles');

遗憾的是，有两个问题。首先，.load 函数从第二页获取 #articles div 及其内容，并将其放入现有的 #articles div 中。这意味着，即使这可行，每次点击也会在 div 内产生递归 div。太乱了。

有人可以帮助我使用命令将第二页中的 .story 类简单地附加到第一页上的#articles div 中吗？之后我可以弄清楚使用变量、循环和 PHP for WordPress 实现自动化的流程。只需需要一些有关正确 jQuery 脚本的帮助。

PS 额外问题：如果有人知道 jQuery .load/.get 是否会损害浏览量（这对于那些靠广告收入的人来说很重要），请告诉我！如果每个 .load/.get 都算作 Google Analytics 的另一次点击，那就太好了！

谢谢！

Answer 1

您无法使用 jQuery.load() 方法附加内容，但您可以使用 jQuery.get()：

$.get('/page/2/', function(data){ 
  $(data).find("#articles .story").appendTo("#articles");
});

Answer 2

我可能会这样做。

$('#articles').append($('<div/>', { id: '#articles-page2' });
$('#articles-page2').load('http://example.com/page/2/ #articles > *');

#articles > * 将所有直接子项获取到 #article。

Answer 3

对于附加数据，我认为您不想使用 $.load()。相反，您可能想考虑使用 $.ajax()。

$.ajax({
  url: 'yourlocation/test.html',
  success: function(data) {
    $('.result').html(data);
    $("#yourdiv").append(data);
  }
});

Answer 4

试试这个，它对我有用。

$('#articles').append( $('<div/>').load('http://example.com/page/2/ #articles') );

Answer 5

$.get(YourURL, function(data){ 
$('#divID').append(data);});