What is the best way to apply different styles to alternative children within a dynamically generated list?

Question

What is the best way to apply different styles to alternative children within a dynamically generated list?

I am currently implementing the following code snippet:

$('.js-toprow:nth-child(even)').css("background:", "#ddd");
$('.js-toprow:nth-child(odd)').css("background:", "#ff0000");

Within the function:

function resetSlides() {
    container.css({
        'top': -1 * item_height
    });

// >> Using it here <<   
}

In order to alternate between two different colors for an element tree.

The complete code can be viewed here (already resolved): "Working" script returning Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent

In this scenario, the variable that needs to be styled is "slides", so I experimented with using

slides.css({'background': '#000'});

within the function for testing purposes, and it was successful. However, I still require the even and odd styling.

It is essential to achieve this using jQuery alone since applying CSS leads to restyling of the children as new elements are inserted at the beginning of the list.

jquery css

Answer 1

Answer №1

To determine whether an index is even or odd, you can simply iterate through the elements and use the modulo operator:

$('.js-toprow').each(function(index) {
    if (index % 2 === 0) { // Even
      $(this).css('background', '#ddd');
    } else { // Odd
      $(this).css('background', '#ff0000');
    }        
});

The modulo operator calculates the remainder when dividing two numbers, here it is used to check if index is divisible by 2. Even numbers will always return a remainder of 0.

Answer 2

To determine whether an index is even or odd, you can simply iterate through the elements and use the modulo operator:

$('.js-toprow').each(function(index) {
    if (index % 2 === 0) { // Even
      $(this).css('background', '#ddd');
    } else { // Odd
      $(this).css('background', '#ff0000');
    }        
});

The modulo operator calculates the remainder when dividing two numbers, here it is used to check if index is divisible by 2. Even numbers will always return a remainder of 0.

What is the best way to apply different styles to alternative children within a dynamically generated list?

Answer №1

Similar questions

Having trouble with CSS basics? Seeing properties change across multiple classes?

Using HTML and JavaScript, we can set two different color values - one for the background and one for the h1 title

Determine if a webpage is out of focus using jQuery

Stopping Accordion Title from Moving Vertically in Material-UI

Select the five previous siblings in reverse order using jQuery's slice method

Tips for keeping the background image in place while resizing the page

What is the method for creating a vertical line similar to this one?

What is the best way to align a GIF and two rows of text within a container div?

Why am I unable to retrieve data using jQuery and PHP?

The jQuery AJAX function successfully executes, but the MySQL post deletion operation fails to take place

What is the best method to modify the inner HTML of a recently added element?

A mysterious underscore suddenly materializes within Font Awesome icons when used in HTML

What could be causing my js.erb file to not function properly?

CSS opacity is currently not working as intended

Numerous pop-up windows on a single webpage

What is the proper way to add comments within CSS code inline?

What is the best way to center a paragraph vertically around a particular word?

Guide to displaying WordPress functions within an accordion in my loop

Adjusting CSS to switch up the color scheme

Encountering a blank webpage displaying a warning that reads, "The use of 'event.returnValue' is outdated