Question

如何选择.content内而不是.bts内的所有元素？这是我的代码。我正在使用not()函数排除.bts，但是它不起作用。应该做什么？

$('.content').not('.bts').click(function() {
  alert("hit");
});

.content {
  height: 100%;
  width: 100%;
}

p {}

.bts {
  background: blue;
  height: 100px;
  width: 100px;
}

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

Answer 1

您可以使用$('.content *:not(.bts)')

.content *表示它将使用.content上的所有元素，添加not(.bts)将从规则中删除所有带有bts class的元素。

演示

$('.content *:not(.bts)').click(function() {
  console.log("hit");
});

.content {
  height: 100%;
  width: 100%;
}

p {}

.bts {
  background: blue;
  height: 100px;
  width: 100px;
}

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

Answer 2

.content不是.bts，因此.not不会做任何事情-而是将另一个选择器传递给click处理程序，以避免在{{1 }}被点击：

.bts

$('.content').on('click', ':not(.bts)', () => {
  console.log("hit");
});

.content {
  height: 100%;
  width: 100%;
}

p {}

.bts {
  background: blue;
  height: 100px;
  width: 100px;
}

Answer 3

这是在Vanilla JS中实现它的方式

let elements = document.querySelectorAll(".content >:not(.bts)");
elements.forEach(ele => {
  ele.addEventListener("click", function() {
    alert("hit")
  })

})

.content {
  height: 100%;
  width: 100%;
}

p {}

.bts {
  background: blue;
  height: 100px;
  width: 100px;
}

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

Answer 4

由于尚未发布此答案，并且是根据OP的代码解决OP问题的最简单方法，所以我会这样做：您只是忘记选择.content个孩子，可以使用{{ 3}}函数在您的.content选择器之后，就像这样：

$('.content').children().not('.bts').click(function() {
  alert("hit");
});

.content {
  height: 100%;
  width: 100%;
}

p {}

.bts {
  background: blue;
  height: 100px;
  width: 100px;
}

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

选择div中的所有元素，但不选择特定元素

4 个答案: