Селектор 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

Ответ является модификацией Мухаммеда .Разница в том, что этот код не использует 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');