如何选择包含img作为直接子项的最外层标记

How can I select outermost tag which contains img as direct child

本文关键字：何选择 选择 img 包含      更新时间：2023-09-26

我有以下标记

var divs = $('div:has(img)').not(':parent:has(>img)');
divs.css('border','1px solid red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div><!-- get this div -->
  1
  <img alt='#' />
  <div>
    2
    <img alt='#' />
    <div>
      3
      <img alt='#' />
      <div>
        4
        <img alt='#' />
      </div>
    </div>
  </div>
</div>
<div><!-- get this div -->
  5
  <img alt='#' />
  <div>
    6
    <img alt='#' />
  </div>
  <div>
    7
    <img alt='#' />
  </div>
</div>
<div>
  <div><!-- get this div -->
    8
    <img alt='#' />
  </div>
</div>

从中，我需要选择包含img标记的最外面的div，如果它的父级包含img标记作为直接子级，我不想选择div。我试过var divs = $('div:has(img)').not(':parent:has(>img)');，但它只有在有父级时才有效。

您的主要问题是:parent选择器没有执行您认为的操作。CSS规则永远不会上升。因此，如果需要向上扩展，则需要使用JavaScript（使用函数.parent()，它在CSS选择器中没有等效的选择器，甚至jQuery扩展选择器也没有）。

var divs = $('div:has(>img)').filter(function(i, n) { return !($(n).parent().children('img').length); });
divs.css('color','red');

然而，由于CSS中的第一个C（"级联"），这将把所有都涂成红色：在1、5和8上声明红色将把这些div中的所有文本涂成红色。

相关文章：