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> 

如何選擇類「CC-ANYTHING」開始ON的"<li>"

CLICK

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

Answer 1

的另一種方法使用.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 
 
    \t 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 2

你必須給這樣的雙引號後的明星，

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

Answer 3

您可以使用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>