我如何 select 一个只有特定 class 的元素？

Question

这是我的select或：

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

我的代码将select这样：

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

我的代码也会select这个：

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

我想做的就是避免它。第二个元素不应该被 selected，因为它没有只有 add_your_qora class。我应该如何写我的 selector?

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

如果您想要的元素是第一个带有此 class 的元素，您可以使用 document.querySelector('.add_your_qora')，这将 return 仅找到与 select 匹配的第一个元素或.

如果你想 select 所有具有 add_your_qora class 的元素，但那些也具有 another_class 的元素除外，你可以使用 $('.add_your_qora:not(.another_class)').

如果你想要select所有具有只有add_your_qoraclass的元素使用这个select或[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>

我如何 select 一个只有特定 class 的元素？

How can I select an element which has only a specific class?

html

javascript

jquery

jquery-selectors