仅选择与选择器匹配的父节点

Posted 2023-05-09

【中文标题】仅选择与选择器匹配的父节点

【英文标题】：Select only parent nodes that match the selector

【发布时间】：2019-04-18 22:41:33

【问题描述】：

我正在尝试获取包含.export 类的所有父节点，任何具有.export 类的父节点的子节点都应从选择中跳过。

节点可以出现在树中的任何位置，但需要任何没有具有相同类的父节点的节点。

具有以下 html 结构：

<div class="export"> <!-- Select this one -->
    <div class="export"> <!-- SKIP this one -->
        <!-- Content -->
    </div>
</div>
<div class="export"> <!-- Select this one -->
    <!-- Some more content -->
</div>

【参考方案1】：

您可以使用 jQuery .not() 方法获取它们，例如：

console.log($(".export").not(".export .export").length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="export">
  <!-- Select this one -->
  <div class="export">
    <!-- SKIP this one -->
    <!-- Content -->
  </div>
</div>
<div class="export">
  <!-- Select this one -->
  <!-- Some more content -->
</div>

【参考方案2】：

您可以使用:not() 查询选择器跳过与选择器中的查询匹配的查询。

$('.export:not(.export >)')

【讨论】：

jQuery 充满了惊喜。这似乎没有记录在案，但它确实有效。