Question

这是我的选择器：

doc.on("click", ".add_your_qora", function(e){

我的代码会选择此项：

<div class="add_your_qora"> whatever </div>

我的代码也会选择它：

<div class="add_your_qora another_class_name"> whatever </div>

我试图做的就是避免它。不应该选择第二个元素，因为它没有仅 add_your_qora类。我该如何编写选择器？

Answer 1

检查当前元素Element.classList长度是否大于1：

$(doc).on("click", ".add_your_qora", function(e) {
  if (this.classList.length > 1) return;

  console.log($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="doc">
  <button class="add_your_qora">only add_your_qora</button>
  <button class="add_your_qora another_class">has another class as well</button>
</div>

Answer 2

如果您想要的元素是第一个具有此类的元素，则可以使用document.querySelector('.add_your_qora')，它将仅返回找到的与选择器匹配的第一个元素。

如果您想要选择add_your_qora类的所有元素，除了another_class之外的元素，您可以使用$('.add_your_qora:not(.another_class)')。

如果您要选择所有仅 add_your_qora类的元素，请使用此选择器[class=another_class]

Answer 3

替代方式，

$(function(){
    $(document).on('click', '.add_your_qora', function(e){
        if ($(this).attr('class').match(/^add_your_qora$/) == null) return;
        
        alert($(this).text());
    });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="add_your_qora"> add_your_qora </div>
<div class="add_your_qora another_class_name"> add_your_qora another_class_name </div>

如何选择只有特定类的元素？

3 个答案: