用 class 从 html 拆分 div 以供脚本使用

Question

我正在尝试构建自己的 'infinite scroll'，因此我比使用插件有更多的控制权。

我目前有以下：

$(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;
}

到目前为止，这是在用户滚动到页面底部时触发的，然后从分页中获取 'next' URL 并返回页面的完整 HTML在成功调用中。

正如您在我的代码中看到的那样，我想让所有带有 class '.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 appended 调用实际上并没有附加任何东西。

用 class 从 html 拆分 div 以供脚本使用

Split divs with class from html to be used by script

html

javascript

jquery

imagesloaded

masonry