What is the best way to transfer the style of one class to another, while also applying it to all elements in

Question

What is the best way to transfer the style of one class to another, while also applying it to all elements in

I am looking to apply a specific style property to all child elements between the "day-start" and "day-end" classes.

https://i.sstatic.net/FS6vf.png

I attempted using code similar to this:

document.querySelectorAll('.day').forEach(
el => el.querySelectorAll('div').forEach(
el => el.style.color = 'red'
)
);

However, I am unsure on how to target elements specifically between these two classes.

Using jQuery with:

 $(".day-start").nextUntil(".day-end").addClass("foo");

successfully adds the class to the correct element but encounters issues with table row tags and does not include the .day-start and .day-end classes.

Is there a way to add the class to all content with a background color applied as an alternative solution?

javascript jquery css dom css-selectors

Answer 1

Answer №1

To streamline the process, you can create a selector for all the days, iterate through them, and apply a specific class when reaching the .day-start element and remove it when reaching the .day-end element.

For example:

let isActive = false;

document.querySelectorAll('.day').forEach((day) => {
    if(day.classList.contains("day-start")) {
        isActive = true;
    }
    if(isActive) {
        day.classList.add("active-day");
    }
    if(day.classList.contains("day-end")) {
        isActive = false;
    }
});

You can view a demonstration of this concept here: https://codepen.io/bj-rn-nyborg/pen/OJRJwEN

Answer 2

To streamline the process, you can create a selector for all the days, iterate through them, and apply a specific class when reaching the .day-start element and remove it when reaching the .day-end element.

For example:

let isActive = false;

document.querySelectorAll('.day').forEach((day) => {
    if(day.classList.contains("day-start")) {
        isActive = true;
    }
    if(isActive) {
        day.classList.add("active-day");
    }
    if(day.classList.contains("day-end")) {
        isActive = false;
    }
});

You can view a demonstration of this concept here: https://codepen.io/bj-rn-nyborg/pen/OJRJwEN

Answer 3

Answer №2

To properly keep track of elements in between, consider utilizing the following approach:

let section = 0; // Our marker: 0 - pre, 1 - mid, 2 - post

document.querySelectorAll('.day').forEach(
    el => {
        if (section === 0 && el.classList.contains('day-start')) {
            section = 1;
        } else if (section === 1 && el.classList.contains('day-end')) {
            section = 2;
            // In a loop scenario, a simple `break;` would suffice
            // Unfortunately, `forEach` lacks this feature.
        }

        if (section === 1) { // Apply operations only within section 1
            el.querySelectorAll('div').forEach(
                div => div.style.color = 'red'
            )
        }
     }
);

A loop implementation provides a more straightforward solution:

let isBefore = true;

for (const el of document.querySelectorAll('.day')) {
    if (isBefore && el.classList.contains('day-start')) {
        isBefore = false;
    } else if (el.classList.contains('day-end')) {
        break; // Terminate iteration at this point
    }

    if (isBefore) continue; // Proceed to the next element after current round ends

    el.querySelectorAll('div').forEach(
        div => div.style.color = 'red'
    );
 }

Answer 4

To properly keep track of elements in between, consider utilizing the following approach:

let section = 0; // Our marker: 0 - pre, 1 - mid, 2 - post

document.querySelectorAll('.day').forEach(
    el => {
        if (section === 0 && el.classList.contains('day-start')) {
            section = 1;
        } else if (section === 1 && el.classList.contains('day-end')) {
            section = 2;
            // In a loop scenario, a simple `break;` would suffice
            // Unfortunately, `forEach` lacks this feature.
        }

        if (section === 1) { // Apply operations only within section 1
            el.querySelectorAll('div').forEach(
                div => div.style.color = 'red'
            )
        }
     }
);

A loop implementation provides a more straightforward solution:

let isBefore = true;

for (const el of document.querySelectorAll('.day')) {
    if (isBefore && el.classList.contains('day-start')) {
        isBefore = false;
    } else if (el.classList.contains('day-end')) {
        break; // Terminate iteration at this point
    }

    if (isBefore) continue; // Proceed to the next element after current round ends

    el.querySelectorAll('div').forEach(
        div => div.style.color = 'red'
    );
 }

What is the best way to transfer the style of one class to another, while also applying it to all elements in

Answer №1

Answer №2

Similar questions

Exclude the parent background in the child class when inheriting other properties

Send the function with parameters, but do not pass its output

Using jQuery to animate a div when clicked by the mouse

The issue of PHP not being executed when using HTML AJAX

Using ISO-8601 format to display dates in JSON within a .NET WebService

HTML tends to disregard the dimensions specified in the JavaScript file

Converting Strings into Variable Names in Vue.js: A Step-by-Step Guide

Tips for perfectly aligning an "inline-block" element with an ordered list (ol)

Determine the specific Flow.js / ng-flow input (flow-btn) that was utilized for the file upload

"Enhancing User Experience with Multiple Conditional Checkboxes in jQuery

Mastering the art of nesting loops and conditions in React: A comprehensive guide

Issues with retrieving the scope attribute within a directive

Troubleshooting: Route guard in Angular 4 not functioning properly on initial page load

Searching and replacing several elements in JavaScript code

What is the best way to send all the form values as an array and iterate through them when submitting to a SQL database?

How can I modify the navbar-collapse in Bootstrap to alter the background color of the entire navbar when it is shown or open on a mobile screen?

Utilizing Angular to Embed SVG Child Components Within Parent SVG Component

Find the total sum of various spans

A convenient Delete Modal Component in React utilizing Reactstrap

Combining two arrays with varying lengths based on their values