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>

我的选择器可以成功选择特定编辑器中的所有窗口小部件，并忽略“嵌套”编辑器，但它不忽略“嵌套”窗口小部件。也就是说，它会选择#embed-editor2内的小部件。

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

您知道如何在JQuery中实现目标吗？最好有一个选择器？

Answer 1

如果您知道嵌入式编辑器（如果存在）将从顶部向下精确一层，则可以使用后代选择器和Export.image.toDrive({ image: myRaster, folder: "GEE Data", fileNamePrefix: "myRaster1", scale:30 })来确保第一个后代不是{{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')

jQuery选择器忽略特定类中的元素

1 个答案: