Question

我正在努力建立自己的无限卷轴＆＃39;所以我比使用插件有更多的控制权。

我目前有以下内容：

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

到目前为止，当用户滚动到页面底部时，它会触发，然后进入下一个＆＃39;分页中的URL并在成功调用中返回页面的完整HTML。

正如您在我的代码中看到的那样，我希望将所有div与类#gg。.grid-item＆＃39;由以下代码使用。

我真的很难获得＆＃39; .grid-item＆＃39; divs分开使用。

有人能解释我怎么能这样做吗？

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调用实际上并不附加任何内容。

使用html中的类拆分div以供脚本使用

1 个答案: