Problem with selecting odd and even div elements

I have a div populated with a list of rows, and I want to alternate the row colors. To achieve this, I am using the following code:

$('#PlatformErrorsTableData').html(table1Html);
$('#PlatformErrorsTableData div:nth-child(even)').css("background-color", "aqua");

The structure of table1Html is as follows:

<div>
  <span class="platformTable columnWidth10">Originator1</span>
  <span class="platformTable truncate">Message for Originator# 1</span>
  <span class="platformTable columnWidth15">Server1</span>
  <span class="platformTable columnWidth20">5:50 PM</span>
</div>
<div>
  <span class="platformTable columnWidth10">Originator2</span>
  <span class="platformTable truncate">Message for Originator# 2</span>
  <span class="platformTable columnWidth15">Server2</span>
  <span class="platformTable columnWidth20">5:50 PM</span>
</div> 
<div>
  <span class="platformTable columnWidth10">Originator3</span>
  <span class="platformTable truncate">Message for Originator# 3</span>
  <span class="platformTable columnWidth15">Server3</span>
  <span class="platformTable columnWidth20">5:50 PM</span>
</div>
<div>
  <span class="platformTable columnWidth10">Originator4</span>
  <span class="platformTable truncate">Message for Originator# 4</span>
  <span class="platformTable columnWidth15">Server4</span>
  <span class="platformTable columnWidth20">5:50 PM</span>
</div>

However, despite setting the background color to aqua, it is not displaying on screen. Upon inspecting the div with Firebug, the background color property is correctly set to aqua.

Any assistance in resolving this issue would be greatly appreciated.

javascriptcss

Answer №1

Try implementing CSS code rather than jQuery

#ErrorTableData div:nth-child(2n){
   background:#a5a5a5;
}

#ErrorTableData div:nth-child(2n+1){
   background:#eee;
}

Answer №2

Your code is functioning perfectly on this end.

Feel free to check out the Live Demo.

If you're experiencing issues with your CSS styling, consider adding overflow:hidden and setting a min-height for your div element.

This adjustment might resolve any potential problems you're facing.

Answer №3

Consider specifying a specific height for the div elements initially. If this solves the issue, it is likely related to CSS problems and you might need to add something like overflow: hidden; to them (after removing the height). Additionally, ensure that the span elements have a background color set to transparent.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a new view upon clicking a button using AngularJS in a single-page web application

I am completely new to AngularJS and currently working on my first project. I apologize in advance if my question seems very basic. In my project, I have created a page using simple HTML with three buttons. When these buttons are clicked, I want to load v ...

javascripthtmlangularjsmodel-view-controller

State calculation occurs too tardily

I'm working on creating a simple like button that changes color based on whether it's liked or not. I've tried to calculate this beforehand using React.useEffect, but it seems to be calculating afterwards instead... The hearts are initially ...

javascriptreactjsreact-nativereact-hooks

Trigger event once item is selected from the jQuery combobox dropdown

I have implemented a custom autocomplete combobox using the jQuery UI library to create text fields with dropdown functionality. This hybrid input allows users to either select an item from the dropdown or enter free text manually. However, I need to trigg ...

javascriptjqueryhtmlformsjquery-ui

Sending a POST request in nodeJs that does not return any value

I have a button on my client site that sends a POST request to my server. The request does not require a response as it simply inserts data into the database. However, after clicking the button, the client continues to wait for a response until it times ou ...

javascriptnode.jsrest

Sort and incorporate elements by multiple strings present in an array

Looking to filter and include strings in an array by matching them with items in another array? Here is a sample code snippet that filters based on a single string: const filteredString = `${this.filter}`.toLowerCase(); this.filteredCampaigns = this. ...

javascripttypescript

React Router's nested route causes a full page reload when navigating

I have been working on setting up nested routing in React Router and here is my code: import React from 'react'; import DefaultSwitch from './components/DefaultSwitch/DefaultSwitch'; import './scss/App.scss'; const App = () ...

javascriptreactjsreact-router

Getting the user's name and country using `auth().createUserWithEmailAndPassword` is a simple process

Hey there fellow developers. I'm fairly new to react native and I'm trying to implement firebase authentication for a project. However, I'm stuck on how to include user name and country when using the standard auth().createUserWithEmailAndPa ...

javascriptreactjsfirebasereact-nativefirebase-authentication

Cast your vote once for each post within the Angular application

Currently, users are only able to vote up or down once in general. I would like to allow users to vote up or down once per post. <div ng-repeat="post in posts | orderBy:'-upvotes'"> <span class="glyphicon glyphicon-thumbs-up" ...

javascriptangularjs

Iterate through an array of objects and add them to a fresh array

I am encountering an issue where I would like to generate a fresh array of objects in order to avoid utilizing a nested array map. However, the error message below is being displayed: TypeError: Cannot read property 'subscriber_data' of undefine ...

javascriptarraysjsonreactjsecmascript-6

Issue with Submit Button Functionality following an Ajax Request

I am facing an issue where the submit button does not work after an ajax call, but works fine if I reload the page. The problem arises when a modal is displayed for email change confirmation. If the user confirms the change, the form submits successfully. ...

javascriptjquery

In a lineup of items arranged horizontally, the second to the last item is perfectly centered, whereas the final item stretches out to occupy all of the leftover

I am currently working on creating a horizontal list of items: My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space. While I have successfully created the list of i ...

htmlcssflexbox

When a Mui Button is clicked, it changes the color of all tabs instead of just the active

My website footer contains 5 links represented by Mui Buttons with the component set to {Link} in order to transform them into clickable links. Currently, all the buttons are black and change to green when hovered over. However, I want the button color to ...

cssreactjsmaterial-ui

Switch the paper tab to a dropdown menu in Polymer.js

Can someone assist me in transforming the paper tab into a paper drop down menu in polymer JS? I want the drop-down to appear with a list of values when hovering over the Top menu. Activity Execution <paper-tab cla ...

javascriptnode.jsangularuser-interfacepolymer

PHP distributing empty sheets (possibly for website configuration)

Hey everyone! I've been struggling to set up a profile page on my website for the past week. Whenever I try to include PHP code or echoes in the content pages, I either get blank pages or encounter a 500 server error. My website is structured with a ...

phphtmlcss

The attempt to connect with react-native-fetch-blob has not been successful

How do I resolve the issue of displaying a PDF from my assets folder in an Expo, React Native project using react-native-pdf? While scanning folders for symlinks, encountered an error with RNFetchBlob library in my project directory. The automatic linki ...

javascriptandroidreactjspdfreact-native

The file size exceeds the server's upload limit, despite making changes to the php.ini file

I've encountered a problem trying to upload an .OBJ file to the server, resulting in an 'Error 1' message. The uploaded file surpasses the upload_max_filesize directive specified in php.ini This error is detailed on this page - http://ph ...

javascriptphphtmlajaxfile-upload

Eliminating the final space in CSS flexbox layout

When I set the display of an element to flex, I noticed that the last space in a text string gets removed. <div class="has_flex"> Some text <a href="link">Link</a></div> After setting display to flex: <div class="has_flex"> ...

htmlcssflexbox

Obtain the selected dropdown value and transfer it to the controller seamlessly without the need to reload the page

Currently, I am facing an issue with two dropdown lists in a bootstrap modal - CATEGORY and SUBCATEGORY. The values in the SUBCATEGORY list depend on the selection made in the CATEGORY list. My goal is to retrieve the selected value ID and pass it to my co ...

javascriptphpajaxcodeignitermodal-dialog

Exploring data elements using iteration in JavaScript

Here is some code that is functioning properly: Morris.Bar({ element: 'barchart', axes: true, data: [ json.bar.bar1 ], xkey: 'x', ykeys: ['y', 'z', ' ...

javascriptjson

Updating a JavaScript global variable within a click event function: A quick guide

I am currently using Javascript and jQuery to retrieve the mouse coordinates of a click event for use in other Javascript functions. The issue I am facing is that global variables set within an event function do not update outside the function, unlike glob ...

javascriptglobal-variablesjquerymouseclick-event