Скачать или смотреть How to Determine if a Class Contains a String Using JavaScript

Discover a simple and effective way to check if a class name in JavaScript contains a specific string, such as 'collapsed-box', using jQuery or native DOM methods.
---
This video is based on the question https://stackoverflow.com/q/63814824/ asked by the user 'Mario' ( https://stackoverflow.com/u/5475303/ ) and on the answer https://stackoverflow.com/a/63814873/ provided by the user 'CertainPerformance' ( https://stackoverflow.com/u/9515207/ ) 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: Javascript to determine if the class contains a string in its name

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.
---
Determining if a Class Contains a String in JavaScript

In the world of web development, it's common to manipulate HTML elements dynamically using JavaScript. One challenge developers often encounter is checking if a class name contains a specific string. In this guide, we'll dive into a straightforward solution for this problem, particularly when working with HTML generated through R shiny, which includes collapsible boxes.

Introduction to the Problem

Imagine you have the following HTML structure generated from an R shiny application:

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

You want to determine if the box class contains the string collapsed-box using JavaScript. Your initial attempt was close, but there's a minor adjustment needed to make it work.

The Solution

There are two main approaches to solve this problem: using jQuery or native DOM methods. Let's explore both options.

Option 1: Using jQuery to Check the Class

In your original attempt, you used the following code:

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

The issue with this line is that you're trying to access the classList property of a jQuery object. However, classList is a native JavaScript property, not available directly on jQuery objects. To fix this, you need to extract the DOM element from the jQuery collection first:

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

Option 2: Using Native DOM Methods

If you prefer to stick with native JavaScript, you can select the element and check the class without using jQuery. Here's how you can do that:

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

Explanation of the Code

$('# idtolocate') or document.querySelector('# idtolocate'): Selects the element with the ID idtolocate.

.closest('.box'): Traverses the DOM up to find the nearest ancestor with the class box.

.classList.contains('collapsed-box'): Checks if the element's class list contains the specified class collapsed-box and returns true or false.

Conclusion

Both methods effectively determine if the class name contains the specified string. Depending on your preference for jQuery or native JavaScript, you can choose the solution that best suits your project. With just a little adjustment, you can easily extract the class information you need to work with your R shiny generated HTML.

Feel free to implement either method in your code and adapt it as required for your web development needs!