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；

请记住，我不知道 背景网址 。

最佳答案

您可以扩展 jQuery 选择器来实现这一点。并根据您的具体规则。

像这样的东西:

$.extend($.expr[':'], {
  backgroundValid: function(a) {
    //change the url for what you want
    return $(a).css('background-image') === "url(http://stacksnippets.net/validurl)";
  }
});

var test = $('.foo').closest('div:backgroundValid');

console.log(test) //prints bar

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-image:url('validurl');">
  <div class="bar" style="background-image:url('validurl');">
    <div class="foo"></div>
  </div>
</div>

关于javascript - 查找包含特定 CSS 属性的父级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33651777/