Javascript 查找包含特定CSS属性的父级

我需要找到包含以下css属性的最近父级：

background-image: url(*here goes a link to a valid image*);

找到它可能是通过选择所有元素，在一个数组中过滤它们，然后使用数组的第一个/最后一个元素来完成的，但是我想知道是否有更快的方法来选择满足我前面提到的要求的最接近的父元素，如下所示：

<parent1 style="background-image:url(http://google.com/images/photo.png);">
        <parent2 style="background-image:url('http://google.com/images/photo.png');">
                <mydiv></mydiv>
        </parent2>
</parent1>

我希望选择parent2

---

请记住，我不知道背景url

，您可以扩展jQuery选择器来实现这一点。还有你的具体规则

大概是这样的：

$.extend（$.expr['：']{
背景有效：功能（a）{
//更改您想要的url
返回$（a）.css（'background-image'）=“url”(http://stacksnippets.net/validurl)";
}
});
var-test=$（'.foo'）.closest（'div:backgroundValid'）；
console.log（test）//打印条形图

---

这可能对您有所帮助

选择元素

把它所有的父母都带走

按所需内容筛选其父级

var firstParent，URL_TO_MATCH=“URL（HELLO WORLD）”；
$（'#foo'）.parents（）.filter（function（））{
var isValid=$（this）.css（'background-image'）==URL\u TO\u匹配；
如果（！firstParent&&isValid）{
firstParent=$（此项）；
}
返回有效；
});无需过滤所有父级，只需像这样递归即可

html

<div id="parent1" style="background-image:url(validurl);">
    <div id="parent2" style="background-image:url(validurl);">
        <div id="start"></div>
    </div>
</div>

你对“第一个父母”怎么看？最内在的？还是最外层？@feeela是离孩子最近的父母。这不会找到问题中要求的第一个父母，而是所有的父母。另外请注意，“HELLO WORLD”应该替换为“url（）”，而不仅仅是url。这只是一个起点，您需要改进下面的代码段。。。例如，为了处理区分大小写或不区分大小写的问题，而不是使用===运算符，您应该使用正则表达式，或者，例如，处理“而不是”“我不知道背景图像url，但家长必须将其作为一个值。您的意思是，如果家长有背景图像url，无论该值是什么，这就足够了。”。我说得对吗？是的，没错。我不在乎url中的值是什么，因为它可能是指向图像的链接。但“背景图像”属性是必须的。我更新了答案和。它完全解决了你的问题。
$(function() {
    var cssKey = "background-image";
    var element = $('#start');
    var found = false;
    while (!found) {
        element = element.parent();
        found = element.css(cssKey) == 'none' ? false : true;
        if (element.is($('html'))) break;
    }
    if (found) {
        console.log(element.attr('id'));
    } else {
        console.log('Not found');
    }
});