过滤新内容仅显示特定的div [英] Filter new content to only display specific divs

问题描述

在我的页面中加载更多内容，我正在使用jQuery.get（）函数检索外部页面链接。

to load more content inside my page, I'm retrieving an external page link with the jQuery.get() function.

我可以检索所有页面，但是，当我试图过滤结果只得到.container_journal_postdiv时，我无法使它工作。
欢迎您的帮助。

I can retrieve all the page, however, when I'm trying to filter the result to get only the ".container_journal_post" divs, I can't make it work. Your help is welcome.

这是我目前的HTML代码：

Here is my current HTML code:

<div id="related_projects" class="gridalicious">
    <article><div class="container_journal_post"> post 1 </div></article>
    <article><div class="container_journal_post"> post 2 </div></article>
</div>

这是我的外部页面HTML代码：

Here is my external page HTML code:

<div id="related_projects" class="gridalicious">
    <article><div class="container_journal_post"> post 34 </div></article>
    <article><div class="container_journal_post"> post 35 </div></article>
</div>

这是我的javascript函数：

Here is my javascript function:

jQuery(document).ready(function($) {
    var pageNum = parseInt($("#current_page")[0]["innerHTML"]);
    // Get the page number 
    var max = parseInt($("#max_num_pages")[0]["innerHTML"]);
    // Get the maximum number of the blog section.
    var nextLink = $("#pagination .next")[0]["href"];
    // Get The link of the next page of posts.

    // A button where the user is cliking to load more posts
    $('#append').click(function(){
        makeboxes();
    }); 

    makeboxes = function() {
        var boxes = new Array;

        $.get(nextLink, function(data) {
           // console.log(data);
           // Return the "nextLink" HTML DOM
           // Can't cut it correctly 
           // console.log($(data));
           // Return 100 items

           // I would like to get something like this:
                $(data).filter( 'article' ).each(
                function( key, value ) { 
//                  value has to be equal at 
//                  <div class="container_journal_post"> post 34 </div>
                    boxes.push(value);
                }

            );
            // load at the end of the div the new boxes
            jQuery( "#related_projects" ).gridalicious( 'append', boxes );
        });
    }
});

调用makebox函数后需要的结果：

Result wanted after the "makebox" function is called:

<div id="related_projects" class="gridalicious">
    <article><div class="container_journal_post"> post 1 </div></article>
    <article><div class="container_journal_post"> post 2 </div></article>
    <article><div class="container_journal_post"> post 34 </div></article>
    <article><div class="container_journal_post"> post 35 </div></article>
</div>

推荐答案

你可能会使用jquery的加载函数：

you might use the load function of jquery:

$（'＃result'）。load（'ajax / test.html #container'）;
而 #container 是被提取内容的选择器

$('#result').load('ajax/test.html #container'); whereas #container is the selector for the content being fetched

（参见 jquery加载文档）

这篇关于过滤新内容仅显示特定的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！