Listen for change of class in jquery

user_450120 0
Viewed 75896

Is there a way in jquery to listen for a change to a node's class and then take some action on it if the class changes to a specific class? Specifically, I'm using the jquery tools tabs plugin with the slideshow and as the slideshow is playing, I need to be able to detect when the focus is on a particular tab/anchor so that I can unhide a specific div.

In my specific example, I need to know when:

<li><a class="nav-video" id="nav-video-video7" href="#video7-video">Video Link 7</a></li>

changes to the following with the class "current" added:

<li><a class="nav-video" id="nav-video-video7 current" href="#video7-video">Video Link 7</a></li>

Then I want to unhide a div at that moment.

Thanks!

jquery javascript
4 Answers

I know this is old, but the accepted answer uses DOMSubtreeModified, which has now been deprecated for the MutationObserver. Here's an example using jQuery (test it out here):

// Select the node that will be observed for mutations
let targetNode = $('#some-id');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: false, subtree: false, attributeFilter: ['class'] };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.attributeName === "class") {
            var classList = mutation.target.className;
            // Do something here with class you're expecting
            if(/red/.exec(classList).length > 0) {
                console.log('Found match');
            }
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode[0], config);

// Later, you can stop observing
observer.disconnect();
user_40099720
Related