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

我有一个WordPress安装，我试图用jQuery来创建一个加载更多的效果。我在使用页面片段的基本.load功能时遇到了一些麻烦。我不介意使用.get，因为我在这里看到一些线索，将其作为更好的解决方案。可以jQuery .load追加而不是替换？

这里是我的网页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脚本。

P.S.奖金问题：如果有人知道jQuery .load/.get是否会损害综合浏览量，这对于那些有广告收入的人来说很重要，请让我知道！如果每个.load/.get都算作Google Analytics的另一个热门产品，那我们就很棒！

谢谢！

来源

2010-10-22 Sahas Katta

我不认为$ .load（）会影响谷歌分析。为了让Google注册一个综合浏览量，实际的页面需要以这样一种方式加载，即Google分析的JavaScript被执行。当一个页面被加载到浏览器窗口中时，google JavaScript会被执行，而不是像在$ .load（）中那样检索文件内容时。 – quakkels 2010-10-22 18:35:35

不能使用jQuery.load()方法追加内容，但你可以做你想做使用的是什么jQuery.get()：

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

来源

2010-10-22 18:36:41 gabriel

Gabriel，谢谢！你的代码非常容易理解，并且很好用。我正在使用您的代码以及Znarkus的进口容器跳到正确位置的概念。试图弄清楚如何暂时重写链接，任何帮助都会很棒。这个问题在上面的Znarkus的评论中被描述。 – 2010-10-22 20:03:39

如果你想过滤加载的内容get（）不会做这项工作。 $ .load（'/ page/2/.posts'）;例如 – keinabel 2012-07-30 00:17:55

我刚刚有一个类似的问题，这似乎是工作，但给我一个空的对象，当我将其登录到控制台进行调试。页面上也没有任何东西出现。 :( – maxxon15 2012-09-02 13:14:24

我可能会不喜欢这样。

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

#articles > *获取所有直接孩子#article。

来源

2010-10-22 18:37:37 Znarkus

嘿Znarkus，你能澄清一些代码吗？我需要让PHP生成名为'＃articles-page2'，＃＃articles-page3'等的DIV吗？ – 2010-10-22 19:20:13

是的，这也会使它更容易分离页面，对正确处理历史记录很有用（用户在浏览器中按下后退按钮），然后你可以加载页面'http：// example.com/page＃articles-page3'，浏览器向下滚动到那个结果集 – Znarkus 2010-10-22 19:34:02

我把它和你的想法和来自Gabriel的代码一起工作了！还有一个问题稍微有点相关，但我有'Load More'我使用.attr来读取链接的值来获取下一页对于'.load'，我仍然希望它是一个链接，以防JS禁用/不工作/ SEO。但是我怎么能让jQuery重写它来滚动到'＃articles-page2'内部生成的DIV实例？再次感谢！ – 2010-10-22 20:01:33

对于追加数据，我不认为你会想要使用$ .load（）。相反，你可能想使用$ .ajax（）进行研究。

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

来源

2010-10-22 18:38:59 quakkels

试试这个对我有用。

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

来源

2015-10-07 18:05:05 user2962835

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

回答

相关问题