Скачать или смотреть How to Dynamically Add the show Class to a Specific div Using jQuery

Learn how to add the `show` class to a parent `div` based on the presence of an `active` class in child `li` elements using jQuery.
---
This video is based on the question https://stackoverflow.com/q/67937745/ asked by the user 'D_P' ( https://stackoverflow.com/u/12428848/ ) and on the answer https://stackoverflow.com/a/67937798/ provided by the user 'Rory McCrossan' ( https://stackoverflow.com/u/519413/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to add some html class to specific div?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Dynamically Add the show Class to a Specific div Using jQuery

In web development, you may often encounter situations where you need to manipulate HTML elements based on specific conditions. One common scenario involves adding CSS classes to <div> elements based on the presence of certain classes in their child elements.

In this post, we'll discuss how to dynamically add the show class to a parent <div> if any of its child <li> elements have the active class using jQuery.

The Problem

Let’s say you have a dynamic list structure where each <li> can have different states, including an active class. Our goal is to ensure that if any of the <li> elements under a specified parent <ul> contain the active class, we want to add a show class to the corresponding <div> that contains that <ul>.

For instance, consider the following HTML structure:

[[See Video to Reveal this Text or Code Snippet]]

The Solution

Step 1: Use jQuery’s :has() Selector

To implement our solution, we’ll utilize jQuery’s :has() selector to determine if the <div> contains any <li> with the class active. If it does, we will add the show class to it.

Here’s how we can do this:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: CSS for Visibility Control

Since the show class is being added dynamically, you'll want to ensure that your CSS reflects what should be displayed. Add the following styles:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Include jQuery

Make sure to include jQuery in your HTML file. You can leverage a CDN for convenience:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Putting It All Together

Now, the complete structure in your HTML file will look something like this:

[[See Video to Reveal this Text or Code Snippet]]

Final Thoughts

By following the steps outlined above, you can easily manipulate HTML elements dynamically based on specific conditions, enhancing user experience through interactivity. If you have further questions or need help implementing this solution, feel free to reach out!