1

我在显示图像的网页上实现无限滚动。图像使用masonry对齐。最初，当页面加载时，我只在#containerdiv 中放了 10 张图像。并且所有图像都使用下面的代码正确对齐，在 chrome 脚本控制台中没有错误。

var $container = $('#container');
        $container.imagesLoaded(function(){
        $('#container').masonry({
          itemSelector: '.box',
          columnWidth: 200,
          isAnimated: true
        });
    });

但是当用户向下滚动时，我会

$.ajax({
         url: "load.php?offset="+1+"&quantity="+1,
         success: function(html){
         if(html){
                  var $container = $('#container');
                  var $test = "<div>even doing this causes error </div>";
              $container.append($test).masonry('appended',$test);
        }
  });

现在，当我向下滚动时，我会在 chrome 控制台中遇到错误，并且附加的图像会堆积起来。

 Uncaught TypeError: Object <div class....... </div>  has no method filter
4

1 回答 1

13

正如我在评论中所说，您收到的错误消息在使用 jQuery 时很典型。filter()是 jQuery 对象的一种方法。masonry 似乎试图在$test变量内的任何对象上调用它，在您的示例中，该对象是一个 String 对象。基本上，它调用

"<div>even doing this causes error </div>".filter(...)

这会产生你的错误。

为了使事情顺利进行，您必须将masonry()jQuery 对象而不是 String（或任何其他 JavaScript 对象）传递给该方法。如果您有一个字符串，例如作为 AJAX 调用的结果，您可以使用其上的 jQuery 函数将其转换为 jQuery 对象。对于您的示例：

$test = $("<div>even doing this causes error </div>");

这将创建一个 jQuery div 对象，该对象应该可用于砌体。

另一个提示：您似乎在所有 JavaScript 变量前面都加上了一个$符号。虽然这取决于您，但我建议只为保存 jQuery 对象的变量添加前缀，$而不是任何其他变量的前缀。因此，对于字符串，您只需使用var test = "String";. 这是我发现非常有用的约定。此外，这将使其他人更容易理解您的代码。

于 2012-09-09T08:25:25.830 回答