JavaScript如何找到包含字符串的最接近的類

Question

在單擊按鈕時，我試圖找到包含字符串的最近的類。 HTML看起來像：

<div class="feature I am the best">
  <div class="some style"> 
    <div class="new style">
      <button class="clickme">Click me </button>
    </div>
  </div>
</div>

我的JavaScript是

$('.clickme').on('mouseup', function(event) {
  var description = $(this).closest('div[class*=:contains(feature)]').attr('class');
  console.log("Description "+description);
});

我進入控制台的全部是：

Description undefined

Answer 1

假設它確實是您想要的子字符串檢查（而不是類選擇器），則您不希望contains(...)位，這就是*=含義：

 $('.clickme').on('mouseup', function(event) { var description = $(this).closest('div[class*=feature]').attr('class'); // Change here -------------------------------^^^^^^^ console.log("Description "+description); }); 

 <div class="feature I am the best"> <div class="some style"> <div class="new style"> <button class="clickme">Click me </button> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

如果字符串中可能包含引號或其他不符合CSS標識符定義的字符（或者，如果您只是想保持謹慎），請在該值.closest('div[class*="feature I am"]')加上引號： .closest('div[class*="feature I am"]')

---

但是，在您的示例中， feature是一個類，因此您要使用類選擇器（ .closest("div.feature") ）。

Answer 2

只需將類選擇器與.closest()一起使用，無需使用:contains()

 $('.clickme').on('mouseup', function(event) { var description = $(this).closest('.feature').attr('class'); console.log("Description "+description); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="feature I am the best"> <div class="some style"> <div class="new style"> <button class="clickme">Click me </button> </div> </div> </div> 

Answer 3

用class*="feature"替換包含

 $('.clickme').on('mouseup', function(event) { var description = $(this).closest('div[class*="feature"]').attr('class'); console.log("Description " + description); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="feature I am the best"> <div class="some style"> <div class="new style"> <button class="clickme">Click me </button> </div> </div> </div> 

Answer 4

 $('.clickme').on('mouseup', function(event) { var description = $(this).closest("[class^=feature]").prop('class'); console.log("Description "+description); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="feature I am the best"> <div class="some style"> <div class="new style"> <button class="clickme">Click me </button> </div> </div> </div> 

對於通配符，選擇器應該像這樣。

Answer 5

將字符串保留在雙引號內

var description = $(this).closest('div[class*=:contains("feature")]').attr('class');