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

使用.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');

Answer 2

答案是对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>

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

2 个答案: