Question

我有一个WordPress安装，我正在尝试使用jQuery创建一个Load More效果。我在使用页面片段的基本.load功能时遇到了一些麻烦。我不介意使用.get，因为我在这里看到了一些线索，认为这是一个更好的解决方案。

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

第一页：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 classes添加到第一页的#articles div即可吗？我可以用WordPress之后的变量，循环和PHP来计算自动化的后勤。只需要使用正确的jQuery脚本进行一些协助。

P.S。奖金问题：如果有人知道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);});

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

5 个答案: