Execute a jQuery function every time the class of the parent container div changes

Question

Execute a jQuery function every time the class of the parent container div changes

I am seeking to trigger the function below whenever its containing div parent

<div class="section">...</div>

transitions to an "active" state, for example:

<div class="section active">...</div>

$(".skills-grid__col").each(function () {
    var left = $(this).data('left');
    $(this).animate({
        opacity: 1,
        left: left
    }, 1200);
});

<div class="section">
    <div class="skills-grid__col"></div>
    <div class="skills-grid__col"></div>
</div>

What type of event would be appropriate in this scenario?

javascript jquery html css

Answer 1

Answer №1

There are limitations when it comes to working with events in older browsers.

If removing support for IE10 is acceptable, you have the option to utilize a MutationObserver that will detect changes in the element :

var observer = new MutationObserver(function(mutations) {
  if ($yourElement.hasClass('active')) {
     // perform actions
  }
});
observer.observe($yourElement[0], {attributes: true});

If dropping IE10 support is not an option and you prefer not to continuously check the element, your best bet would be to intercept the section where the class changes. Additionally, you could create a workaround by periodically verifying the class if window.MutationObserver is undefined.

Answer 2

There are limitations when it comes to working with events in older browsers.

If removing support for IE10 is acceptable, you have the option to utilize a MutationObserver that will detect changes in the element :

var observer = new MutationObserver(function(mutations) {
  if ($yourElement.hasClass('active')) {
     // perform actions
  }
});
observer.observe($yourElement[0], {attributes: true});

If dropping IE10 support is not an option and you prefer not to continuously check the element, your best bet would be to intercept the section where the class changes. Additionally, you could create a workaround by periodically verifying the class if window.MutationObserver is undefined.

Execute a jQuery function every time the class of the parent container div changes

Answer №1

Similar questions

Issues encountered when dealing with floating elements and margins

Arranging div containers with nested content

What could be causing the issue of loading text not appearing in Vue.js?

Designing an interactive HTML table that adapts to various screen

Obtaining JavaScript data using Python Selenium Web Driver

Is there a way to rigorously validate my HTML, CSS, and JavaScript files against specific standards?

Vue.js - The dissonance between data model and displayed output

Find all strings in the array that do not begin with a letter from the alphabet

Unexpected TypeError thrown by a simple react-cube-navigation demonstration

The requested module cannot be located, were you referring to "js" instead?

Populate an array using a web API AJAX request in jQuery

Verify whether the current directory includes a package.json file with a matching name value

Experiencing difficulties when uploading information to an API in a React JS application

Implementing dynamic content loading using CSS and jQuery upon link/button activation

closing the space between rows at the top

Changing the loading spinner icon in WooCommerce

The app in NextJs encounters layout issues on all pages due to a break in

Building a Many-to-Many Relationship in Node.js Using Sequelize.js

"Why does the React useState array start off empty when the app loads, but then gets filled when I make edits to the code

Django issue: A Tuple or struct_time argument is necessary