如何選擇僅具有特定類別的元素？

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>