javascript - 查找包含特定 CSS 属性的父项

Question

我需要找到包含以下 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；

请记住，我不知道后台网址。

Answer 1

您可以扩展 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>