Can someone help me understand how to change the structure in order to identify which class has a body?

Question

Can someone help me understand how to change the structure in order to identify which class has a body?

I have a small example to share with you:

HTML CODE:

<div class="body">
    <div class="test">TEST</div>
</div>

JS CODE:

switch (className) {   //instead of n, I need to write className
    case body:
        alert("my class is body");
        break;
    case another_class:
        alert("my class is another");
        break;
    default:
        //etc
}

I simply want to test if my class exists one at a time using a switch statement.

Each page on my site has different classes in the body, and I want to apply styles only if a certain class is present...

I hope I have explained my idea clearly, if not, please let me know.

Thank you in advance!

javascript jquery html css

Answer 1

Answer №1

an example using jQuery could be:

if($('.body').length){
    alert('this is the body');
}
else if ($('.another_class').length)
{
    alert('another class detected');
}

Answer 2

an example using jQuery could be:

if($('.body').length){
    alert('this is the body');
}
else if ($('.another_class').length)
{
    alert('another class detected');
}

Answer 3

Answer №2

Here is a sample code snippet for you to use:

switch (document.querySelector('div').classList[0]) {
    case "body":
        alert("my class is body");
        break;
    case "another_class":
        alert("my class is another");
        break;
    default:
        //etc
}

Check out this fiddle for a live demo.

Answer 4

Here is a sample code snippet for you to use:

switch (document.querySelector('div').classList[0]) {
    case "body":
        alert("my class is body");
        break;
    case "another_class":
        alert("my class is another");
        break;
    default:
        //etc
}

Check out this fiddle for a live demo.

Answer 5

Answer №3

$('div').each(function(){
var className=$(this).attr('class');
switch (className) {
    case "content":
        alert("class is +"className);
        break;
    case "example":
        alert("class is +"className);
        break;
    default:
        //additional code
}
});

Perhaps this can be useful.

Answer 6

$('div').each(function(){
var className=$(this).attr('class');
switch (className) {
    case "content":
        alert("class is +"className);
        break;
    case "example":
        alert("class is +"className);
        break;
    default:
        //additional code
}
});

Perhaps this can be useful.

Answer 7

Answer №4

It's not clear what your goal is, but you can add a specific style to a child element based on the parent element's class without using any javascript. Simply define your CSS like this:

.body .test{
   style the test inside .body regardless, can be overridden by subsequent rules ;)
}
.body.classNameA .test{
   style the test if classNameA is present;
}
.body.classNameB .test{
   style the test if classNameB is present;
}

If the .body class is the only thing changing, you can omit it.

Answer 8

It's not clear what your goal is, but you can add a specific style to a child element based on the parent element's class without using any javascript. Simply define your CSS like this:

.body .test{
   style the test inside .body regardless, can be overridden by subsequent rules ;)
}
.body.classNameA .test{
   style the test if classNameA is present;
}
.body.classNameB .test{
   style the test if classNameB is present;
}

If the .body class is the only thing changing, you can omit it.

Can someone help me understand how to change the structure in order to identify which class has a body?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The color scheme detection feature for matching media is malfunctioning on Safari

Dealing with functions that may not consistently return a promise

Safari is currently experiencing compatibility issues with iPad, resulting in a malfunction

Setting a default value for a select option in Angular 2

express node struggling to locate bootstrap.js file

Functional Components with Methods in ReactJS

Is there a way to synchronize breakpoint values across different media queries?

How can I display table rows along with their child table rows in Angular?

Integrating jquery events and functions with angularjs

Variations between <div/> and <div></div>

Tips for testing the onEnter and resolve functions of a ui-router state

Learn how to retrieve the value of an associated field at a specific index by utilizing a combo box in JavaScript when receiving a JSON response

Tips for halting the live graph plotting based on a specific condition with canvas js

Using AngularJS to automatically fill in HTML select fields

Why won't console.log function execute in this particular situation?

having difficulty showing the column filter feature in the DataTable

The alignment of the list is off when using Flexbox on smaller screens

Retrieve items in Angular by sending a POST request

Unexpected absence of Aria tags noticed

Automatically launch a popup window specified in JavaScript