javascript - 将 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。

正如您在我的代码中看到的，我希望获取类为“.grid-item”的所有 div 供下面的代码使用。

我真的很难将“.grid-item”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;
}

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