Селектор JQuery для игнорирования элементов внутри указанного класса c

Question

Я пытаюсь создать селектор JQuery, чтобы выбрать все элементы .widget в редакторе, но исключаю виджеты во вложенном редакторе. Это гораздо проще объяснить, просмотрев ниже HTML. Как вы можете видеть, я пометил, какие элементы я хочу выбрать, а какие нет.

<div id='editor1' data-type='editor' class="widget">
    <p class="widget">Should be in select qry</p>
    <p class="widget">Should be in select qry</p>
    <p class="widget">Should be in select qry</p>
    <div>
        <p class="widget">Should be in select qry</p>
    </div>

    <div id='embed-editor2' data-type='editor' class="widget"> <!-- This element should not be included in select qry -->
        <p class="widget">Should NOT be in select qry</p>
        <p class="widget">Should NOT be in select qry</p>
        <p class="widget">Should NOT be in select qry</p>
    </div>

    <p class="widget">Should be in select qry</p>
    <p class="widget">Should be in select qry</p>
</div>

Мой селектор может успешно выбирать все виджеты внутри указанного c редактора И игнорировать «вложенные» редакторы, НО он не игнорирует «вложенные» виджеты. Ie, он будет выбирать виджеты, которые находятся внутри #embed-editor2, когда не должен.

$('#editor1 .widget:not([data-type="editor"])').activateWidget();

Есть идеи, как мне достичь своих целей в JQuery? Желательно с селектором?

Answer 1

Если вы знаете, что встроенный редактор, если он существует, будет ровно на один уровень сверху вниз, то вы можете использовать селектор потомков и :not, чтобы убедиться, что первый потомок не является [data-type='editor']:

#editor1 > .widget:not([data-type="editor"]), #editor1 > *:not([data-type="editor"]) .widget

#editor1 > .widget:not([data-type="editor"]),
#editor1 > *:not([data-type="editor"]) .widget {
  background-color: yellow;
}

<div id='editor1' data-type='editor' class="widget">
    <p class="widget">Should be in select qry</p>
    <p class="widget">Should be in select qry</p>
    <p class="widget">Should be in select qry</p>
    <div>
        <p class="widget">Should be in select qry</p>
    </div>

    <div id='embed-editor2' data-type='editor' class="widget"> <!-- This element should not be included in select qry -->
        <p class="widget">Should NOT be in select qry</p>
        <p class="widget">Should NOT be in select qry</p>
        <p class="widget">Should NOT be in select qry</p>
    </div>

    <p class="widget">Should be in select qry</p>
    <p class="widget">Should be in select qry</p>
</div>

Если вложенный редактор может иметь произвольную глубину, выбрать его с помощью одного селектора все равно будет возможно, но намного страшнее, поскольку вам придется используйте :not для каждого потомка:

#editor1 > .widget:not([data-type="editor"]),
#editor1 > *:not([data-type="editor"]) > .widget:not([data-type="editor"]),
#editor1 > *:not([data-type="editor"]) > *:not([data-type="editor"]) > .widget:not([data-type="editor"])
// ...
{
  background-color: yellow;
}

Даже если вы предпочитаете простые селекторы, это плохая идея. Вместо этого было бы лучше отфильтровать элементы впоследствии, чтобы убедиться, что их ближайший [data-type="editor"] - тот, который вам нужен:

$('#editor1 .widget')
  .filter((_, elm) => elm.closest("[data-type='editor']").id === 'editor1')

$('#editor1 .widget')
  .filter((_, elm) => elm.closest("[data-type='editor']").id === 'editor1')
  .css({ backgroundColor: 'yellow' });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='editor1' data-type='editor' class="widget">
    <p class="widget">Should be in select qry</p>
    <p class="widget">Should be in select qry</p>
    <p class="widget">Should be in select qry</p>
    <div>
        <p class="widget">Should be in select qry</p>
    </div>

    <div id='embed-editor2' data-type='editor' class="widget"> <!-- This element should not be included in select qry -->
        <p class="widget">Should NOT be in select qry</p>
        <p class="widget">Should NOT be in select qry</p>
        <p class="widget">Should NOT be in select qry</p>
    </div>

    <p class="widget">Should be in select qry</p>
    <p class="widget">Should be in select qry</p>
</div>