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-НИБУДЬ» НА щелчке "<li>"

$('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>