Question

我编写了一些JS代码，用于过滤所有大于指定大小的图像。过滤后的DOM与点击事件相关联。

var largeImages = allImages.filter(function(){  
    return ($(this).width() > 70) || ($(this).height() > 70)  
});

但是现在我也用AJAX向DOM添加了一些图片。这些图片具有通过该过滤器的大小，但目前未过滤，因为它们是在过滤DOM后添加的。

现在我有两个问题：

jQuery中是否有“实时”过滤器功能可以过滤DOM并将新添加的元素附加到数组中？
如果此功能不存在。如何观察DOM更改的，以便我可以再次运行此过滤器？

更新：我没有机会绑定到添加照片的事件。我正在开发Chrome扩展程序，它提供了一些处理照片的选项。

Answer 1

如果您需要监控dom更改以重新运行过滤器，并且AND仅定位chrome（这是关于chrome扩展名），那么您可以使用DOM变异观察器

然后当dom更改时，您可以重新运行过滤器。像这样：

var observer = new MutationObserver(function(){
    // run your filter here
});
observer.observe(document);

Answer 2

你应该绑定添加新图像的事件，即AJAX调用的回调函数。

Answer 3

您可以使用实时nodeList，然后访问该变量;例如：

var images = document.getElementsByTagName('img');

将持续跟踪图像，包括添加到文档中的新图像。当然，这种方法意味着每次向页面添加另一个nodeList时都必须对img进行过滤。虽然这是可能的，但结果是您可以在将相关元素添加到页面时简单地重新选择相关元素。但是，有一种方法：

var images = document.getElementsByTagName('img');
$('#addImage').click(function(e){
    e.preventDefault();
    $('<img />', {
        'src' : 'http://placekitten.com/150/150/',
        'height' : '150px',
        'width' : '150px'
    }).insertAfter('#count');
    $('#count').text(function(){
        // using Array.prototype.filter() to filter the array:
        return [].filter.call(images, function(a){
            return a.naturalWidth > 70;
        }).length;
    });
});

JS Fiddle demo

但是可以通过以下方式实现同样的效果（只需在添加后重新选择img元素）：

$('#addImage').click(function(e){
    e.preventDefault();
    $('<img />', {
        'src' : 'http://placekitten.com/150/150/',
        'height' : '150px',
        'width' : '150px'
    }).insertAfter('#count');
    $('#count').text(function(){
        return $('img').filter(function(){
            return this.naturalWidth > 70;
        }).length;
    });
});

JS Fiddle demo

参考文献：

使用jQuery实时DOM过滤

3 个答案: