Как получить класс элемента с помощью префикса через jQuery

Question

Каков наилучший способ получить класс элемента по префиксу?

Например, у меня есть:

<div class="cc-colour-red cc-size-big cc-width-narrow"> 

Как получить эти отдельно - цвет, того размера и ширина?

Надеюсь, это имеет смысл.

У меня есть элемент DOM. Конечным результатом будет «большой», «красный» и «узкий».

Спасибо!

Answer 1

Попробуйте this:

JavaScript

$("div").each(function(index, elem){ 
    var classes = $(elem).attr("class"); 
    var color = classes.replace(/.*cc-colour-([^\s]+).*/g, "$1"); 
    var size = classes.replace(/.*cc-size-([^\s]+).*/g, "$1"); 
    var width = classes.replace(/.*cc-width-([^\s]+).*/g, "$1"); 
    console.log(color, size, width); //red big narrow, blue small wide, green medium narrow 
}); 

HTML

<div class="cc-colour-red cc-size-big cc-width-narrow"> 
<div class="cc-colour-blue cc-size-small cc-width-wide"> 
<div class="cc-colour-green cc-size-medium cc-width-narrow"> 

Answer 2

Используйте следующие

$("div").prop("classList").forEach(function(entry) { 
    console.log(entry.split('-')[2]); 
}); 

Answer 3

Если вы хотите получить DOM элемент по префиксу класса, вы можете использовать этот селектор:

^= 

Если вы используете несколько классов CSS, есть другой селектор для 'содержит':

*= 

Пример:

$("[class^='cc-size-']") 

Answer 4

Вы можете использовать document.querySelector() с селектором "[class|=cc]", .className, .replace() с RegExp/cc-|\s/g исключить префикс замены строки. В качестве альтернативы вы можете использовать .match() возвращает массив значений

var values = document.querySelector("[class|=cc]") 
 
      .className.replace(/cc-|\s/g," "); 
 
console.log(values);

<div class="cc-colour-red cc-size-big cc-width-narrow"> 
 
</div>

Answer 5

Лучший способ достичь этого - не использовать классы вообще, а вместо этого использовать индивидуальные атрибуты data-* для каждого свойства.

Если вы не можете изменить HTML, вы можете достичь того, что вам нужно, создав массив объектов, содержащий пары ключ/значение. Затем можно использовать индекс элемента, чтобы связать его с пар ключ/значение объекта:

var arr = $('div').map(function() { 
    var obj = {}; 
    for (var i = 0; i < this.classList.length; i++) { 
     var className = this.classList[i]; 
     var matches = /^cc-(.+)-(.+)$/.exec(className); 
     obj[matches[1]] = matches[2]; 
    } 
    return obj; 
}).get(); 

Пример вывода:

Working example

Этот подход имеет преимущество быть полностью расширяемый; если вы добавите другие классы, тогда код будет автоматически работать без изменений.