What is the best way to get an element class by prefix?
For example I have:
<div class="cc-colour-red cc-size-big cc-width-narrow">
How to get those separately - the colour, te size and the width?
I hope that makes sense.
I have the DOM element selected. The final result would be "big", "red" and "narrow".
Thanks!
Try 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">
If you want to get DOM element by class prefix, you can use this selector:
^=
If you are using multiple css classes, there is another selector for 'contains':
*=
Example:
$("[class^='cc-size-']")
You can use document.querySelector(), with selector "[class|=cc]", .className, .replace() with RegExp /cc-|\s/g to exclude prefix from replacement string. You could alternatively use .match() to return an array of values
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>The best way to achieve this would be to not use classes at all, and instead use individual data-* attributes for each property.
If you cannot change the HTML then you could achieve what you required by creating an array of objects which contains the key/value pairs. You can then use the index of the element to relate it to the key/value pairs object:
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();
Example output:
[{
"colour": "red",
"size": "big",
"width": "narrow"
}]
This approach has the benefit of being completely extensible; if you add any other classes then the code will automatically work without changes.
div in OP does not have any id, won't that be a problem?
Use the following
$("div").prop("classList").forEach(function(entry) {
console.log(entry.split('-')[2]);
});
data-*attributes for each property instead. Are you able to change the HTML format?color,font-sizeandwidth?