javascript - 如何选择包含 img 的最外层标签作为直接子标签

Question

我有以下标记

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)'); 但只有当它有父级时它才有效。

Answer 1

你的主要问题是 :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 中的所有文本涂成红色.