时间戳

首页 > 解决方案 > JQuery 在点击时加载更多帖子

jquery - JQuery 在点击时加载更多帖子

问题描述

我正在尝试在我的博客页面底部添加一个“显示更多”按钮。该页面默认显示 12 个帖子。当我单击“显示更多”链接时，我希望在页面上已有的帖子之后附加更多帖子。

“显示更多”链接使用一点 JQuery 可以完美运行（见下文）。它不起作用的是新帖子的呈现位置。我希望它们出现在 div 内，而不是出现在 div 内。

这是 HTML：

<div id="filter-results">
 <div class="post"></div>
 <div class="post"></div>
 <div class="post"></div>
 <div class="post"></div>

 <a id="load-older-posts" href="/page/X/">Show More</a>
</div>

这是jQuery：

$('#filter-results').on('click', '#load-older-posts', function(e) {
    // prevent new page load
    e.preventDefault();
    // store next page number
    var next_page = $(this).attr('href');
    // remove older posts button from DOM
    $(this).remove();
    // ajax older posts below existing posts
    $('#filter-results').append(
      $('<div />').load(next_page + ' #filter-results')
    );
  });

使用当前代码，我得到的是：

<div id="filter-results">
 <div class="post"></div>
 <div class="post"></div>
 <div class="post"></div>
 <div class="post"></div>
 <div>
  <div id="filter-results">
   <div class="post"></div>
   <div class="post"></div>
   <div class="post"></div>
   <div class="post"></div>
  </div>
 </div>

 <a id="load-older-posts" href="/page/X/">Show More</a>
</div>

我如何得到类似的东西：

<div id="filter-results">
 <div class="post"></div>
 <div class="post"></div>
 <div class="post"></div>
 <div class="post"></div>

 <div class="post"></div>
 <div class="post"></div>
 <div class="post"></div>
 <div class="post"></div>

 <a id="load-older-posts" href="/page/X/">Show More</a>
</div>

TNX 伙计们！！

标签： jquerywordpress

解决方案

将 append 放在加载函数回调中，同时#filter-results在加载函数中选择 div 子项。

$('<div>').load(next_page + ' #filter-results > div', function() {
    $('#filter-results').append($(this).html());
});

也可以选择使用儿童班

$('<div>').load(next_page + ' #filter-results > .post', function() {
    $('#filter-results').append($(this).html());
});

或者如果你不想选择它的孩子

$('<div>').load(next_page + ' #filter-results', function() {
    $('#filter-results').append($(this).find('#filter-results').html());
});

来源：https ://forum.jquery.com/topic/load-but-append-data-instead-of-replace#14737000001115765

推荐阅读