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

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)添加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什么都不会做-相反，另一种选择传递到单击处理程序，以避免触发处理程序时.bts点：

 $('.content').on('click', ':not(.bts)', () => { 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 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问题的最简单的方法，我会这样做：你只是忘了选择.content孩子，你可以用你的.children()函数做到这一点。 .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>