如何检查SVG中是否缺少CSS类？

Question

I'm using a dynamic class to show a list of svg icons. I need to display a sample image only if a css class ("icon") is missing. How can I do this?

     <svg class="icon${Id} icon${Id}-dims" preserveAspectRatio="xMidYMid meet"
 width="40px" height="40px"></svg>

Note: ID is a variable i use to make SVG classes dynamic. I need to know when there are no matching classes available in CSS. I have around 4000 icon classes.

Answer 1

You can check like this also..

if(($('#test').attr('class')).indexOf("icon$") < 0) {


}

Answer 2

Here is the pure JS approach.

//check for a specific 'icon' class
if(!document.querySelector('svg').classList.contains(`icon${Id}`)){
    console.log(`class icon${Id} not found`);
}
//check if no class contains 'icon' in its name
if(document.querySelector('svg').className.indexOf('icon') === -1){
    console.log(`Can not find class which has the word 'icon' in its name`);
}

The above code uses ES6 strings template .

Answer 3

Try this:

$st = $('svg').attr('class');
if ($st.slice(0,$st.indexOf(' ')) != $st.slice($st.indexOf(' ')+1,$st.indexOf('-'))) {
    alert('ch img')
//change img
}

https://jsfiddle.net/g9e3vcw3/2/