I have the div section which is generated dynamically which the class name ends with number.I want to get the number from the class attribute
I want to get the number from the class submission-1 (1),submission-2 (2) and tried as in snippet.I caught the error undefined match function.how to get the number from class attribute
$(document).ready(function(){
var num = $('.submission-').attr('class').match(/\d+$/)[0];
console.log(num);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform submission-2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform submission-3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform submission-4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform submission-12">
<span class="first">12</span>
<span class="second">1212</span>
</div>
Try this
$(document).ready(function(){
var classes = $('[class*=submission]').map(function(_,cl) {
return cl.className.split(" ")[1].split("-")[1]; // or just cl.className.split("-")[1];
}).get();
console.log(classes);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform submission-2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform submission-3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform submission-4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform submission-12">
<span class="first">12</span>
<span class="second">1212</span>
</div>
Recommendation - use data attributes instead if you can change server code:
$(document).ready(function(){
var classes = $('[data-submission]').map(function(_,sub) {
return $(this).data("submission");
}).get();
console.log(classes);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform" data-submission="2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform" data-submission="3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform" data-submission="4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform" data-submission="12">
<span class="first">12</span>
<span class="second">1212</span>
</div>
You can construct them from the array but since you are looking for a class submission- which doesn't exist you can take into account a common class that exists webform then you can use method get() which converts the jQuery selection novelist into an array and map them to extract the index
$(document).ready(function() {
var indexArray = $('.webform').get().map(element => +element.classList.toString().match(/\d+$/)[0]);
console.log(indexArray);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform submission-2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform submission-3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform submission-4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform submission-12">
<span class="first">12</span>
<span class="second">1212</span>
</div>
Why don't you use .split("-").pop() like this and also if you need number from all elements then you will need to iterate through all elements like this.
$(document).ready(function(){
var num = [];
$("div[class*=' submission-']").each(function(){
num.push($(this).attr('class').split("-").pop());
});
console.log(num);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform submission-2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform submission-3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform submission-4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform submission-12">
<span class="first">12</span>
<span class="second">1212</span>
</div>
Related
By example I have a list of classes which the class "ld-certificate-link" will be called "brod" and it has an icon which it is represented with a white style color and what I wish to do is that when I click the icon the class disappears.
The problem is that when I select the query or it only affect one "brod" and the next ones doesn't change the color at all or the second case scenario is that only by clicking one it change the color of every "brod". Also notice that "brod" has an href which is dynamic and unique because it spawns after a quiz is submitted so what happens when you click "brod" is that the href which is a .pdf file automatically downloads. Also this has to work into every new brod that is generated. Any hints? I'm pretty new on JS and I'm doing my best but I'm having a hard time on this.
The most close code that I get is this one:
Html:
<div class="ld-item-list-item ld-item-list-item-course ld-expandable learndash-complete ld-expanded" id="ld-course-list-item-42634">
<div class="ld-item-list-item-preview">
<a href="https://xxxxxxx.com/courses/prueba-ii/" class="ld-item-name">
<div class="ld-status-icon ld-status-complete ld-secondary-background"><span class="ld-icon-checkmark ld-icon"></span></div> <span class="ld-course-title">Prueba II</span>
</a> <!--/.ld-course-name-->
<div class="ld-item-details">
<a class="ld-certificate-link" target="_blank" href="https://xxxxxxx.com/certificates/35472/?course_id=42634&cert-nonce=9c8a79d8ae" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a>
<div class="ld-status ld-status-complete ld-secondary-background">Completo</div>
<div class="ld-expand-button ld-primary-background ld-compact ld-not-mobile ld-expanded" data-ld-expands="ld-course-list-item-42634">
<span class="ld-icon-arrow-down ld-icon"></span>
</div> <!--/.ld-expand-button-->
<div class="ld-expand-button ld-button-alternate ld-mobile-only ld-expanded" data-ld-expands="ld-course-list-item-42634" data-ld-expand-text="Desplegar" data-ld-collapse-text="Contraer">
<span class="ld-icon-arrow-down ld-icon"></span>
<span class="ld-text ld-primary-color">Contraer</span>
</div> <!--/.ld-expand-button-->
</div> <!--/.ld-course-details-->
</div> <!--/.ld-course-preview-->
<div class="ld-item-list-item-expanded" data-height="604" style="max-height: 604px;">
<div class="ld-progress" style="">
<div class="ld-progress-heading">
<div class="ld-progress-label">Proceso de Capacitación </div>
<div class="ld-progress-stats">
<div class="ld-progress-percentage ld-secondary-color">100% Completado </div> <!--/.ld-course-progress-percentage-->
<div class="ld-progress-steps"> 1/1 pasos </div>
</div> <!--/.ld-course-progress-stats-->
</div> <!--/.ld-course-progress-heading-->
<div class="ld-progress-bar">
<div class="ld-progress-bar-percentage ld-secondary-background" style="width: 100%;"></div>
</div> <!--/.ld-course-progress-bar-->
</div> <!--/.ld-course-progress-->
<div class="ld-item-contents">
<div class="ld-table-list ld-quiz-list">
<div class="ld-table-list-header ld-primary-background">
<div class="ld-table-list-title">
Evaluaciones </div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-column-certificate">
Certificado </div>
<div class="ld-table-list-column ld-column-scores">
Calificación </div>
<div class="ld-table-list-column ld-column-stats">
Estadísticas </div>
<div class="ld-table-list-column ld-column-date">
Fecha </div>
</div>
</div> <!--/.ld-table-list-header-->
<div class="ld-table-list-items">
<div class="ld-table-list-item passed">
<div class="ld-table-list-item-preview">
<div class="ld-table-list-title">
<div class="ld-status-icon ld-quiz-complete ld-secondary-color"><span class="ld-icon ld-icon-quiz"></span></div><span>EXAMEN FINAL PRUEBA II</span>
</div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-table-list-column-certificate ">
<span class="ld-column-label">Certificado: </span>
<a class="ld-certificate-link" href="https://xxxxxxx.com/certificates/35472-2/?quiz=42637&cert-nonce=d8b4a067d0&time=1628218385" target="_new" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-scores ">
<span class="ld-column-label">Calificación: </span>
100% </div>
<div class="ld-table-list-column ld-table-list-column-stats ">
<span class="ld-column-label">Estadísticas: </span>
<a class="user_statistic" data-statistic-nonce="e13a3ca2a2" data-user-id="1" data-quiz-id="29" data-ref-id="306" href="#"><span class="ld-icon ld-icon-assignment"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-date ">
<span class="ld-column-label">Fecha: </span>
05/08/2021 23:53 </div>
</div>
</div> <!--/.ld-table-list-item-preview-->
</div> <!--/.ld-table-list-item-->
<div class="ld-table-list-item passed">
<div class="ld-table-list-item-preview">
<div class="ld-table-list-title">
<div class="ld-status-icon ld-quiz-complete ld-secondary-color"><span class="ld-icon ld-icon-quiz"></span></div><span>EXAMEN FINAL PRUEBA II</span>
</div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-table-list-column-certificate ">
<span class="ld-column-label">Certificado: </span>
<a class="ld-certificate-link" href="https://xxxxxxx.com/certificates/35472-2/?quiz=42637&cert-nonce=d8b4a067d0&time=1628266530" target="_new" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-scores ">
<span class="ld-column-label">Calificación: </span>
100% </div>
<div class="ld-table-list-column ld-table-list-column-stats ">
<span class="ld-column-label">Estadísticas: </span>
<a class="user_statistic" data-statistic-nonce="1fa17abf9e" data-user-id="1" data-quiz-id="29" data-ref-id="307" href="#"><span class="ld-icon ld-icon-assignment"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-date ">
<span class="ld-column-label">Fecha: </span>
06/08/2021 13:15 </div>
</div>
</div> <!--/.ld-table-list-item-preview-->
</div> <!--/.ld-table-list-item-->
<div class="ld-table-list-item passed">
<div class="ld-table-list-item-preview">
<div class="ld-table-list-title">
<div class="ld-status-icon ld-quiz-complete ld-secondary-color"><span class="ld-icon ld-icon-quiz"></span></div><span>EXAMEN FINAL PRUEBA II</span>
</div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-table-list-column-certificate ">
<span class="ld-column-label">Certificado: </span>
<a class="ld-certificate-link" href="https://xxxxxxx.com/certificates/35472-2/?quiz=42637&cert-nonce=d8b4a067d0&time=1628266609" target="_new" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-scores ">
<span class="ld-column-label">Calificación: </span>
100% </div>
<div class="ld-table-list-column ld-table-list-column-stats ">
<span class="ld-column-label">Estadísticas: </span>
<a class="user_statistic" data-statistic-nonce="28dc605682" data-user-id="1" data-quiz-id="29" data-ref-id="308" href="#"><span class="ld-icon ld-icon-assignment"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-date ">
<span class="ld-column-label">Fecha: </span>
06/08/2021 13:16 </div>
</div>
</div> <!--/.ld-table-list-item-preview-->
</div> <!--/.ld-table-list-item-->
<div class="ld-table-list-item passed">
<div class="ld-table-list-item-preview">
<div class="ld-table-list-title">
<div class="ld-status-icon ld-quiz-complete ld-secondary-color"><span class="ld-icon ld-icon-quiz"></span></div><span>EXAMEN FINAL PRUEBA II</span>
</div> <!--/.ld-table-list-title-->
<div class="ld-table-list-columns">
<div class="ld-table-list-column ld-table-list-column-certificate ">
<span class="ld-column-label">Certificado: </span>
<a class="ld-certificate-link" href="https://xxxxxxx.com/certificates/35472-2/?quiz=42637&cert-nonce=d8b4a067d0&time=1628266639" target="_new" aria-label="Certificado" download=""><span class="ld-icon ld-icon-certificate"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-scores ">
<span class="ld-column-label">Calificación: </span>
100% </div>
<div class="ld-table-list-column ld-table-list-column-stats ">
<span class="ld-column-label">Estadísticas: </span>
<a class="user_statistic" data-statistic-nonce="5bdb484223" data-user-id="1" data-quiz-id="29" data-ref-id="309" href="#"><span class="ld-icon ld-icon-assignment"></span></a> </div>
<div class="ld-table-list-column ld-table-list-column-date ">
<span class="ld-column-label">Fecha: </span>
06/08/2021 13:17 </div>
</div>
</div> <!--/.ld-table-list-item-preview-->
</div> <!--/.ld-table-list-item-->
</div> <!--/.ld-table-list-items-->
<div class="ld-table-list-footer"></div>
</div> <!--/.ld-quiz-list-->
</div> <!--/.ld-course-contents-->
</div> <!--/.ld-course-list-item-expanded-->
</div>
JavaScript:
document.querySelector('brod')
.addEventListener("click", handleClick );
function handleClick() {
alert("i got clicked!");
}
var doShow = localStorage.getItem('.brod');
if (doShow == null) {
doShow = true;
}
const anchor = document.querySelector('.brod');
if (doShow == "false") {
anchor.style.display = "none";
}
anchor.addEventListener('click', function() {
localStorage.setItem('.brod', "false");
});
I don't know if I can give a full correct answer without seeing all of your HTML.
I do think part of the issue is that you need to loop over all the instances of .brod and apply your code to all of them. Currently your are only querying one instance of .brod
For example:
let allBrods = document.querySelectorAll('.brod');
[].forEach.call(allBrods, function(brod) {
brod.addEventListener("click", handleClick );
});
I want to hide all span elements and display just one from its parent container(coin).
The output of what I want to achieve should display just "1" and "first" while the others will be hidden.
<div class="types" >
<div class="coin">
<span class="num">1</span>
<span class="num">2</span>
<span class="num">3</span>
</div>
<div class="coin">
<span class="num">first</span>
<span class="num">second</span>
<span class="num">third</span>
</div>
</div>
If you want to do it in Jquery. You can do like below with each() and access the first child with children() and first().
$(".coin").each(function () {
$(this).children().first().hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="types">
<div class="coin">
<span class="num">1</span>
<span class="num">2</span>
<span class="num">3</span>
</div>
<div class="coin">
<span class="num">first</span>
<span class="num">second</span>
<span class="num">third</span>
</div>
</div>
What about doing it with pure css?
.num:nth-child(n+2) {
display: none;
}
<div class="types">
<div class="coin">
<span class="num">1</span>
<span class="num">2</span>
<span class="num">3</span>
</div>
<div class="coin">
<span class="num">first</span>
<span class="num">second</span>
<span class="num">third</span>
</div>
</div>
I have the following code:
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbars">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-text"></span>
</div>
</div>
This content box is generated. I want to hide it if there's no content being generated on the backend. How do I do it? I already tried
if ($('.contentMachine').is(':empty')) {
$('.contentMachine').remove();
}
But it's still not hiding the div's
Here's the fiddle
You need to removed matched elements, so :empty selector with class selector to get the reference of empty elements then apply .remove() method
$('.contentMachine:empty').remove()
You can use pseudo selector empty:
$('.contentMachine:empty').remove();
Update:
You can retrieve the content of contentMachine as a text then play with the result:
$('.contentMachine').each(function () {
var text = $(this).text();
text = text.replace(/(\n|\s)*/mg, '');
if (text === '') {
$(this).remove();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbars">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-text"></span>
</div>
</div>
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbarsd">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestampd" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-textd">With content</span>
</div>
</div>
Last update:
You can achieve it by checking all empty element into .contentMachine:
$('.contentMachine :empty').remove();
Demo
Try this:
content = $('.contentMachine').text();
content = $.trim(content);
if (content.length == 0) {
$('.contentMachine').remove();
}
if .contentMachine this div completely has no text anywhere it will remove by this script. I do it with help of rejex.
var regex = "/^.+\s.+$/" ;
$(document).ready(function(){
console.log($(".contentMachine").text().match(regex));
if ($(".contentMachine").text().match(regex) ==null|| $(".contentMachine").text().match(regex) == 0) {
$(".contentMachine").remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbars">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-text"></span>
</div></div>
Try this one
jQuery( '.contentMachine:empty' ).remove();
I've an HTML below:
<div id="keywords">
<div id="container0">
<span id="term010"> this</span>
<span id="term111"> is</span>
<span id="term212"> a</span>
<span id="term313"> phrase</span>
</div>
<div id="container1">
<span id="term014"> exact</span>
<span id="term115"> match</span>
<span id="term216"> type</span>
</div>
<div id="container2">
<span id="term017"> this</span>
<span id="term118"> is</span>
<span id="term219"> a</span>
<span id="term320"> broad</span>
</div>
</div>
and I would like to remove the parent DIV (container) and it's content if a child span contains a word, "this" for example.
The code should search for the word "this" on all spans and delete the divs with the Id "container0" and "container2". I already have the Regex but I'm totally lost after that. I know that I should use querySelector but I never used it before and tried to make it work, but I failed.
/\<span id="term[0-9]{3,}"> this<\/span>/gm
Thank you,
You can use the :contain() selector.
$(document).ready(function(){
$("#keywords").find("span:contains('this')").each(function(){
if($(this).next("span").html()==" is"){ // Watch out for leading space!!!
$(this).parent("div").remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="keywords">
<div id="container0">
<span id="term010"> this</span>
<span id="term111"> is</span>
<span id="term212"> a</span>
<span id="term313"> phrase</span>
</div>
<div id="container1">
<span id="term014"> this</span>
<span id="term014"> deserves</span>
<span id="term014"> exact</span>
<span id="term115"> match</span>
<span id="term216"> type</span>
</div>
<div id="container2">
<span id="term017"> this</span>
<span id="term118"> is</span>
<span id="term219"> a</span>
<span id="term320"> broad</span>
</div>
</div>
You can accomplish what you are looking for with jquery by doing something like the following (since you mentioned querySelector, you should know that it can be done with plain javascript as well - see the second code example below).
JQuery:
const spans = $('span');
spans.each(function(index, elem) {
if (elem.textContent.toLowerCase().indexOf('this') >= 0) {
elem.parentNode.remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="keywords">
<div id="container0">
<span id="term010"> this</span>
<span id="term111"> is</span>
<span id="term212"> a</span>
<span id="term313"> phrase</span>
</div>
<div id="container1">
<span id="term014"> exact</span>
<span id="term115"> match</span>
<span id="term216"> type</span>
</div>
<div id="container2">
<span id="term017"> this</span>
<span id="term118"> is</span>
<span id="term219"> a</span>
<span id="term320"> broad</span>
</div>
</div>
Javascript only:
const spans = document.querySelectorAll('span');
for (const span of spans) {
if (span.textContent.toLowerCase().indexOf('this') >= 0) {
span.parentNode.remove();
}
}
<div id="keywords">
<div id="container0">
<span id="term010"> this</span>
<span id="term111"> is</span>
<span id="term212"> a</span>
<span id="term313"> phrase</span>
</div>
<div id="container1">
<span id="term014"> exact</span>
<span id="term115"> match</span>
<span id="term216"> type</span>
</div>
<div id="container2">
<span id="term017"> this</span>
<span id="term118"> is</span>
<span id="term219"> a</span>
<span id="term320"> broad</span>
</div>
</div>
I want to use jquery/javascript to change the class of the <span class="thm-card-status">Active</span> when the item is checked/unchecked. There will be a lot of <div class="thm-card"></div> containers so it should only be changed for that specific card.
<div class="thm-card">
<div class="thm-card-media">
<img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
<div class="thm-card-overlay">
<form class="thm-form">
<div class="form-group"><!--Default Checkbox Item-->
<label for="__FOR__">
<input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
<span class="thm-form-label-side">Active</span>
</label>
<i class="fa fa-question-circle"></i>
</div>
</form><!--Form-->
</div>
<span class="thm-card-status">Active</span>
</div>
<div class="thm-card-content">
<div class="thm-card-details">
<h4>THM Slider Main</h4>
</div>
<div class="thm-card-control">
<div class="thm-card-links">
View
Edit
<span class="thm-card-info"><i class="fa fa-star-o"></i></span>
<span class="thm-card-info"><i class="fa fa-trash"></i></span>
</div>
</div>
</div>
</div>
EDIT:
I've tried:
$('.thm-checkbox-status').change(function() {
if($(this).is(':checked')) {
$('.thm-card-status').attr('checked', '').closest('.thm-card-status').addClass('thm-card-status-active');
} else {
$('.open_sub_ja').closest('div').removeClass('someclass');
}
});
And
$("thm-checkbox-status:checkbox").on('change', function(){
$(this).closest('.thm-card-status').attr('class', 'thm-card-status-active');;
});
Here's a working example. I made the thm-card-status-active green, so that you can see it work.
$(function() {
$('input.thm-checkbox-status').change(function() {
if($(this).prop("checked") == true){
$(this).closest('div.thm-card').find('span.thm-card-status').addClass('thm-card-status-active');
} else {
$(this).closest('div.thm-card').find('span.thm-card-status').removeClass('thm-card-status-active');
}
});
});
.thm-card-status-active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thm-card">
<div class="thm-card-media">
<img id="editableimage1" src="https://thehomemag.com/Images/HomeSlider/8.jpg" alt="#" class="img-responsive">
<div class="thm-card-overlay">
<form class="thm-form">
<div class="form-group"><!--Default Checkbox Item-->
<label for="__FOR__">
<input type="checkbox" class="square thm-checkbox-status" id="__ID__" type="checkbox" value="true">
<span class="thm-form-label-side">Active</span>
</label>
<i class="fa fa-question-circle"></i>
</div>
</form><!--Form-->
</div>
<span class="thm-card-status">Active</span>
</div>
<div class="thm-card-content">
<div class="thm-card-details">
<h4>THM Slider Main</h4>
</div>
<div class="thm-card-control">
<div class="thm-card-links">
View
Edit
<span class="thm-card-info"><i class="fa fa-star-o"></i></span>
<span class="thm-card-info"><i class="fa fa-trash"></i></span>
</div>
</div>
</div>
</div>
$('.thm-checkbox-status').change(function(){
$(this).closest('.thm-card-overlay').next().addClass('something');
});