制作一个可链接的jQuery插件，使用另一个jQuery插件过滤集合

Question

我想要做的是相当具体的。我有一个插件，如果项目在视口内+/-容差量，则返回true / false。我正在尝试编写一个可以传递集合的插件，然后将该集合过滤到仅在视口中的那些元素。此外，我希望它能够以正常方式链接，所以称为$（'。someSelector'）。inViewport（）。css（'color'，'green'）;这将使视口中的所有选定元素也变为绿色。

视口检测代码的工作原理是创建可链接的插件inViewport（）（2cd one），我正在寻找建议。问题是我希望过滤集合，但我得到了整个集合。

我也有兴趣获得有关我可以编码的方式的反馈，因此它的处理器效率很高，因为我必须以相对较高的频率在许多元素上运行这些方法。

感谢任何建议。

$.fn.isInViewport = function(){

var tolerance = 600;
var win = $(window);

var viewport = {
    top : win.scrollTop(),
    left : win.scrollLeft()
};

viewport.right = viewport.left + win.width() + tolerance;
viewport.bottom = viewport.top + win.height() + tolerance;

var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();

return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

//这是一个不能正常工作的那个

$.fn.inViewport = function(){

console.log('what is this?');
console.dir(this);

this.filter(function(idx) {
 console.log('////////////////////////////////');
 console.dir($(this));
 console.log($(this).isInViewport());
 return $(this).isInViewport();
});

console.log('what is this AFTER?');
console.dir(this); //it should be filtered but its not

return this;

};

//I am calling it something like this
        $('.galleryImage').inViewport().children('imageContentContainer').find('.img').someOtherJqueryFunction()

所以感谢Kalley在评论中 - 我发现我没有存储/返回已过滤数组的值。生成的代码如下所示：

$.fn.inViewport = function(){

return this.filter(function(idx) {
 return $(this).isInViewport();
});

};