Как я могу выбрать элемент, который имеет только определенный класс?

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

Если нужный элемент является первым с этим классом, вы можете использовать document.querySelector('.add_your_qora'), который вернет только первый найденный элемент, соответствующий селектору.

Если вы хотите выбрать все элементы, которые имеют класс add_your_qora, кроме тех, которые также имеют another_class, вы можете использовать $('.add_your_qora:not(.another_class)').

Если вы хотите выбрать все элементы, которые имеют только add_your_qora класс, используйте этот селектор [class=another_class]

Answer 2

альтернативный способ,

$(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>

Answer 3

Проверьте, превышает ли текущий элемент 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>