分割div与类从html被脚本使用

Question

我正在尝试建立自己的'无限滚动'，所以我有更多的控制比使用插件。

我目前有以下文件:

$(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。

你可以在我的代码中看到，我想获得所有div类'。下面的代码将使用网格项

我真的很难得到'。网格项'div '分隔使用。

有谁能解释一下我该怎么做吗?

Answer 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;
}

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