0

我正在尝试构建自己的“无限滚动”，因此我比使用插件拥有更多的控制权。

我目前有以下内容：

$(window).scroll(function(){
      if  ($(window).scrollTop() == $(document).height() - $(window).height()){
         loadNew();
      }
}); 

function loadNew(){  
    var next = $('a.next').attr('href');

    $.ajax({
        url: next,
        success: function(html){

            ** GET ALL '.grid-item' TO USE BELOW**

            var $newElems = $( **ALL .grid-item** ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
            });
        }
    });
    return false;
}

到目前为止，当用户滚动到页面底部时触发，然后从分页中获取“下一个”URL，并在成功调用中返回页面的完整 HTML。

正如您在我的代码中看到的那样，我想获取所有带有“.grid-item”类的 div，以供下面的代码使用。

我真的很难将'.grid-item' div 分开使用。

有谁能够解释我怎么能做到这一点？

4

1 回答 1

1

您可以做的是将返回的 html 转换为 jQuery 对象，以便您可以使用它来解析它find()以获取相关元素。这很容易通过像这样包装 html 来完成$(html)，但是如果有一个 doctype 声明，那么它将破坏它。我通常做的是确保我只有从开始的 html 标记开始的数据。

试试这个...

function loadNew(){  
    var next = $('a.next').attr('href');

    $.ajax({
        url: next,
        success: function(html){
            html = html.substr("<html");    // remove the doctype
            var $newElems = $(html).find(".grid-item").css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $container.append($newElems).masonry("appended", $newElems, true);
                $newElems.css({ opacity: 1 });
            });
        }
    });
    return false;
}

此外，您需要先将元素附加到容器中，然后告诉 masonry 您已经这样做了。砌体appended调用实际上并没有附加任何东西。

于 2015-08-18T09:43:54.110 回答