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

Question

我找到了使用 :parent 检查父节点是否没有某个 class 的解决方案，但我想排除节点类型。就我而言，我只想要未放置在 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

使用 .closest() 查找元素的任何 article 父元素并检查 select 的长度是否为 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>

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

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

Answer 2

答案是的修改。区别在于这段代码没有使用 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>

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

CSS/jQuery selector to find elements which don't have a certain parent

html

javascript

jquery

jquery-selectors