查找包含特定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；

请注意我不知道背景图片的URL。

- as__

---

你对“第一个父级”做了什么？最内层的还是最外层的？ - feeela

@feeela是最接近该子元素的父级元素。 - as__

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>

- Joel Almeida

Answer 2

不需要过滤所有的父元素，只需像这样递归处理即可 jsfiddle

html

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

JavaScript

$(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');
    }
});

- Rashad Ibrahimov

---

我不知道背景图片的URL，但是父元素必须将其作为一个值。 - as__

你的意思是父元素有背景图片的URL就可以了，不管它的具体值是什么，是吗？ - Rashad Ibrahimov

是的，就是这样。我不在乎 URL 内部的值，因为它很可能是指向图像的链接。但是“background-image”属性是必须的。 - as__

我更新了答案和jsfiddle。它完全解决了你的问题。 - Rashad Ibrahimov

Answer 3

也许这可以帮到你，

1. 选择元素
2. 获取所有父级元素
3. 按照你想要的条件筛选父级元素！

var firstParent, URL_TO_MATCH = "url(HELLO WORLD)";

$('#foo').parents().filter(function() {
  var isValid = $(this).css('background-image') == URL_TO_MATCH;
  

   if(!firstParent && isValid) {
     firstParent = $(this);
   }
  
   return isValid;
});

- Hitmands

---

这不会像问题中要求的那样找到第一个父级，而是找到所有父级。还要注意，'HELLO WORLD' 应该被替换为'url(http://example.com/validurl)'，而不仅仅是 URL。 - Alvaro Flaño Larrondo

这只是一个起点，你需要改进下面的代码片段... 例如，你应该使用正则表达式来处理大小写问题，而不是使用 === 运算符，或者，例如，处理 ' 而不是 **"**。 - Hitmands