具有特定類名的CSS類選擇器jQuery

Question

我想讓類以jQuery中的特定字符串開頭

<li class="active cc-1">A1</li>
<li class="cc-2">B1</li>
<li class="cc-ab amimate-me">C1</li>

如何選擇以"<li>" 為首的“ cc-ANYTHING”開頭的課程

$('li').on('click', function(e){
  alert($(this).attr('class^="cc-*"'));
});

Answer 1

您可以使用Element.classList屬性來迭代元素的類屬性的集合。 和String.prototype.startsWith（）可用於測試。

在此示例中，由於可以滿足多個類的條件，所以使用Array 。

 jQuery(function($) { $('li').on('click', function(e) { var arr = [] for (var i = 0; i < this.classList.length; i++) { var item = this.classList.item(i); if (item.startsWith("cc-")) { arr.push(item); } } console.clear(); console.log(arr); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="active cc-1">A1</li> <li class="cc-2">B1</li> <li class="cc-ab amimate-me">C1</li> </ul> 

Answer 2

另一種使用.attr('class')和Array.prototype.filter() ：

 $('li').on('click', function(e) { var classlist = $(this).attr('class'); if (classlist === undefined) { // check if li doesn't have a class attribute return false; } // filter and return the class if it starts with 'cc-' var ccClass = classlist.split(' ').filter((v, i) => (v.startsWith('cc-'))); console.log(ccClass); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="active cc-1">A1</li> <li class="cc-2">B1</li> <li class="cc-ab amimate-me">C1</li> <li>D1</li> <li class="animate-me">E1</li> </ul> 

Answer 3

您必須在雙引號之后加上星號，

alert($(this).attr('class^="cc-"*'));