Скачать или смотреть How to Dynamically Add a Class to All Sibling Elements in JavaScript on Click

Learn how to utilize JavaScript to add a class to all sibling elements in a group when one is clicked. Understand the DOM manipulation for better interactivity in your web applications.
---
This video is based on the question https://stackoverflow.com/q/75813979/ asked by the user 'Heong' ( https://stackoverflow.com/u/16784805/ ) and on the answer https://stackoverflow.com/a/75814060/ provided by the user 'Barmar' ( https://stackoverflow.com/u/1491895/ ) 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: Add a class to all sibling element if one of the element gets that same class when clicked?

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 a Class to All Sibling Elements in JavaScript on Click

When working on web applications, you may come across a scenario where clicking on one element should affect its sibling elements. For example, if you have a gallery of images, clicking on one image could highlight not only itself but also all its siblings. This guide will take you through the solution to this problem step-by-step, using JavaScript for DOM manipulation.

The Problem: Class Addition on Click

The primary challenge addressed here is how to dynamically add a class to all sibling elements whenever one of the elements is clicked. Your initial attempt may have been to target all sibling elements directly, which does not produce the desired effect.

Example Scenario

Imagine you have a structure like this:

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

When one of the .img_items is clicked, our goal is to add a class (e.g., select) to all items in the container.

The Solution: Adding the Class to Siblings

To achieve this functionality, we can follow a systematic approach. Below are the steps to perform this task:

Step 1: Select the Elements

Start by selecting all the image items with querySelectorAll.

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

Step 2: Add Event Listeners

Next, you will need to loop through each image and add a click event listener to it. Inside this listener, you will manage the class addition to the siblings.

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

Step 3: Target Only Sibling Elements

If you only want to affect the siblings within the same .img_container, you should refine your selection to the parent’s children. Here's how:

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

Complete Example

Here is a complete example showing how to use the above code in conjunction with HTML and CSS:

HTML:

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

CSS:

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

Conclusion

In summary, using JavaScript to dynamically add a class to all sibling elements upon a click event involves selecting the elements properly and leveraging event listeners. This functionality enhances user interaction and can be incorporated into various applications, like image galleries or interactive lists.

By following the steps and utilizing the code examples provided, you can easily manage class additions within sibling elements in your projects.

Feel free to experiment with different styles and DOM structures to see how this technique can fit into your development toolkit!