Question

所以我正在编写一个jQuery插件来应用视网膜图形。我需要选择一个元素（如果它有背景图像或源图像），然后选择其中的每个元素（如果它有背景图像或源图像）。

这是我的插件：

//RetinizeJS
(function($){
    $.fn.retinize = function(){
    $(this).filter(function(){
        if (this.currentStyle) 
            return this.currentStyle['backgroundImage'] !== 'none';
        else if (window.getComputedStyle)
            return document.defaultView.getComputedStyle(this,null)
                .getPropertyValue('background-image') !== 'none';
    }).addClass('bg_found');
    };
})(jQuery);

$('body').retinize();

如果body元素具有背景图像，则需要返回body元素;如果它们是<img src="" />，或者它们具有CSS background-image属性，则需要返回所有元素。

我怎样才能做到这一点？

更新9:13 PM：

这不会将类HAS_IMAGE添加到任何内容，如果我删除<img>，它仍然不会选择|| ($this.css('backgroundImage') !== 'none');元素。

//RetinizeJS
    (function($){
        $.fn.retinize = function(){
            $this = $(this);
            $this.find('*').andSelf().filter(function(){
                return $this.is('img') || ($this.css('backgroundImage') !== 'none');
        }).addClass('HAS_IMAGE');
    };
    })(jQuery);

    $('body').retinize()

Answer 1

您可以使用.css()检查元素是否具有某个CSS规则值。我正在考虑（即未测试）通过检查.css('backgroundImage')，您应该能够检查元素是否具有背景图像，无论是否使用CSS background或CSS {{1 }}

您可以使用该知识设置过滤器功能，如下所示：

background-image

你只需要研究如何使用你的插件级联到后代。

但是，如果您必须从$(selector).filter(function () { var _this = $(this); return _this.is('img') || (_this.css('backgroundImage') !== 'none'); }); 检查，那么延长<body>听起来就像是错误的方式。 $.fn扩展名适用于作用于jQuery对象的函数，例如$.fn或$('body').retinize()。

您可能希望通过直接扩展到$('div img').retinize()来实现效用函数，因此您可以通过$或其他内容调用它。

选择父级中包含图像的所有元素

1 个答案: