CSS/jQuery 选择器查找没有特定父元素的元素

Question

我找到了使用:parent 检查父级是否没有特定类的解决方案，但我想排除节点类型。在我的情况下，我只想要没有放在article 中的表单。

我找到了一个带有过滤器的解决方案，但我想知道是否有一个选择器唯一的方法来实现同样的效果：

$('form.frm').filter(function() {
    return $(this).parent().is(":not(article)");
});

编辑：此解决方案并不完美，因为它仅在 form.frm 是文章的直接子级时才有效。有时我在两者之间有一个 div 。 这里是一个简化的 DOM 结构：

<div id="pageContent">
    <articel>
        <div class="box">
            <form class="frm"></form>
        </div>
    </article>
    <articel>
        <form class="frm"></form>
    </article>
</div>

Answer 1

答案是对Mohammad's 的修改。不同的是，这段代码没有使用filter，而是使用了not：

$('form.frm').not('article form.frm')

这或多或少是一回事。您指定一个全局选择器，然后排除您不想要的forms（在这种情况下，任何form 是article 的后代）。

$('form.frm').not('article form.frm').css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageContent">
  <article>
    <div class="box">
      <form class="frm">article > div</form>
    </div>
  </article>
  <article>
    <form class="frm">article</form>
  </article>
  <div class="box">
    <form class="frm">div</form>
  </div>
</div>

Answer 2

使用.closest() 查找元素的任何article 父元素并检查选择器的长度是否为0。

$('form.frm').filter(function() {
  return $(this).closest('article').length == 0;
}).css('color', 'red');

$('form.frm').filter(function() {
  return $(this).closest('article').length == 0;
}).css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageContent">
  <article>
    <div class="box">
      <form class="frm">article > div</form>
    </div>
  </article>
  <article>
    <form class="frm">article</form>
  </article>
  <div class="box">
    <form class="frm">div</form>
  </div>
</div>

您也可以选择所有.frm 并使用.not() 到exclude 所有元素都有article 父级。

$('.frm').not($('article').find('.frm')).css('color', 'red');