16

我安装了 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');

可悲的是，有2个问题。首先 .load 函数#articles div从第二页抓取 和它的内容并将其放入现有的#articles div. 这意味着，即使这可行，每次点击都会在 div 中产生递归 div。这只是一团糟。

有人可以帮助我简单地将.story classes第二页的附加到#articles div第一页的命令吗？之后，我可以弄清楚使用变量、循环和 PHP 为 WordPress 自动化它的后勤工作。只需要一些适当的 jQuery 脚本的帮助。

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

谢谢！

4

5 回答 5

35

您不能使用该jQuery.load()方法附加内容，但您可以使用以下方法执行您想要的操作jQuery.get()：

$.get('/page/2/', function(data){ 
  $(data).find("#articles .story").appendTo("#articles");
});
于 2010-10-22T18:36:41.437 回答
4

我可能会这样做。

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

#articles > *将所有直系子级提取到#article.

于 2010-10-22T18:37:37.153 回答
2

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

$.ajax({
  url: 'yourlocation/test.html',
  success: function(data) {
    $('.result').html(data);
    $("#yourdiv").append(data);
  }
});
于 2010-10-22T18:38:59.023 回答
2

试试这个它对我有用。

$('#articles').append( $('<div/>').load('http://example.com/page/2/ #articles') );
于 2015-10-07T18:05:05.143 回答
0 
$.get(YourURL, function(data){ 
$('#divID').append(data);});
于 2019-08-31T10:35:20.323 回答