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（＆＃34;级联＆＃34;）：1,5和8上的红色声明将全部描绘这些div中的文字是红色的。

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

1 个答案: