用于跳过元素的 querySelector答案

【问题标题】：querySelector for skipping elements用于跳过元素的 querySelector
【发布时间】：2019-06-12 20:29:24
【问题描述】：

我对 querySelector 有疑问。有没有办法搜索 html 文件中的所有 p 元素但跳过特定 div 中的那些 p 元素？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div>
     <p>hit</p>
     <p>hit</p>
     <p>hit</p>
     <div>
         <p>hit</p>
         <p>hit</p>
         <p>hit</p>
         <p>hit</p>

     </div>
 </div>
<div class="donthit">
    <p>dont</p>
    <p>find</p>
    <p>us</p>
</div>
</body>
</html>

这就是我的示例 html。有没有办法获取所有 p 元素，但不是 div class= "donthit" 中的那些？

【问题讨论】：

使用element.parentNode可以得到p的父元素。然后，检查该父元素是否具有className="donthit"
@PraveenKumarPurushothaman，因为没有人看到你，你决定关闭为重复？
@TemaniAfif 在我看来是个可怜的骗子。都是一样的。
@PraveenKumarPurushothaman 不一样，重复的是关于实现非选择器..这里是要找到可能涉及非选择器的正确选择器
呃...有点困惑。你确定不是骗子？

标签： javascript css dom jquery-selectors

【解决方案1】：

您可以使用 .not() 方法或 :not() 选择器

基于您的示例的代码：

$("div:not(.donthit)").children("p")   // not selector 
$("div").not(".donthit").children("p") // not method

【讨论】：

该类未应用于 p 元素

【解决方案2】：

您可以先获取所有没有特定的 div，然后在其中找到 p 元素：

$('div:not(.donthit)').children('p').addClass('red');

.red {
  border:1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p>hit</p>
  <p>hit</p>
  <p>hit</p>
  <div>
    <p>hit</p>
    <p>hit</p>
    <p>hit</p>
    <p>hit</p>

  </div>
</div>
<div class="donthit">
  <p>dont</p>
  <p>find</p>
  <p>us</p>
</div>

【讨论】：