The functionality of nth-child(odd) seems to be malfunctioning when there is a change

When I group certain elements together in one container, I like to make odd elements stand out by giving them a different background color. However, when I try to filter elements based on conditions and move unwanted elements to another class, the nth-child selector retains its old state. Even when I try to make it dynamic using jQuery, the issue persists.

I would rather keep both used and unused elements in the same container. If I separate them and change the filters, I would need to re-sort the visible elements again.

Check out my jsfiddle here: http://jsfiddle.net/ex4740n2/5/

Do you have any ideas on how to solve this problem?
Thanks in advance!

javascriptjqueryhtmlcss

Answer №1

The response provided by @Pete is as follows: 

It seems that your issue may be stemming from the misconception that nth-child functions as a class selector, when in reality it functions as an element selector.

If achieving the desired outcome solely through CSS is not feasible, consider utilizing JavaScript instead. By iterating through visible elements, you can dynamically modify their background colors. 

var visibled = $(".item");

for (var i = 0; i < visibled.length; i += 2) {
  $(visibled[i]).css("background-color", "rgba(190, 255, 196, 1)");
  $(visibled[i + 1]).css("background-color", "");
}

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

Synchronized loops in jQuery using the .each method

I'm having trouble getting the ajaxStop function in jquery to work. Any suggestions on how to make it fire? My goal is to iterate through each anchor tag and update some content within it. After that, I want to use the ajaxstop event to trigger a scr ...

javascriptjqueryajax

Tips for Keeping Sub Menu Visible Without Having to Click

I am working on an HTML navigation menu that opens submenus on click like this... $("#nav_evnavmenu > li > a").click(function () { // bind onclick if ($(this).parent().hasClass('selected')) { $("#nav_evnavmenu .selected div div ...

javascriptjqueryhtml

Creating dynamic HTML elements with bound JSON data

When a JSON array list of objects is retrieved from the database, it is sent to the client side upon page load of the current user control. var json = new JavaScriptSerializer(); var jsonList = json.Serialize(mylList); Page.Client ...

javascriptjqueryhtmlasp.netjson

stop the page from refreshing when clicking on the map area

http://jsbin.com/iTeNiJIt/1/edit?output I currently have multiple map areas on my webpage. When a user clicks on any of these areas, I want to create an animation without refreshing the page. However, I am facing an issue where the page refreshes every ti ...

javascriptjqueryimagemap

JavaScript Challenge: Calculate the Number of Visible Characters in a Div

I have a div with text content (a string of length S) that is fixed in size but can be of any length. When the text exceeds a certain point (referred to as L), it gets truncated, and the portion beyond that limit becomes invisible. In other words, characte ...

javascriptjqueryhtmlcount

Retrieve data from the database and showcase it in the input fields

There are 7 checkboxes for each day of the week (Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday) with start and end time tags for each. Take a look at the design picture below. Within the database, there are multiple entries where the firs ...

phpjqueryajax

Resizing an image within an anchor tag

Currently, I am working on styling a page in NextJS. The challenge I'm facing is resizing an image that is inside an anchor within a div. Despite numerous attempts, the image refuses to resize as desired. I've experimented with applying properti ...

cssnext.js

tap the hyperlink to complete the form and mimic the action of a designated

I'm working on an HTML form that includes a table and two submit buttons. <input type="image" name="button1" value="First Button" src="some_image.png"> <input type="image" name="button2" value="Second Button" src="some_image.png"> One ch ...

javascriptjqueryhtmldom

Aligning container divs at the center in various screen resolutions

I recently constructed a portfolio website using Bootstrap and Isotope JS. In my layout, I have a container div which works perfectly when viewed on a desktop browser - displaying 3 divs in one line. However, the issue arises when the resolution changes an ...

javascripthtmlcsstwitter-bootstrapjquery-isotope

The absence of jQuery is causing an issue in the webpack +Angular 4+ Asp Core template

I am currently working on a project that was created using the VS 2017 Angular 4 + Asp Core template. I have decided to incorporate a jQuery plugin into my project, which requires me to import jQuery. In my .ts file, I have included the following line of c ...

jqueryangularwebpackasp.net-core

jQuery ceases to function once AJAX content is loaded

Exploring Options for Flexible Data Display I'm currently in the process of building a webpage that allows users to choose between different layouts for loading data. This includes the option to display data in either a list format or a card interfac ...

javascriptphpjqueryajaxreload

Iterate through the classes for updates rather than focusing on individual id fields

I am currently working on creating a function that can refresh data with an AJAX call for multiple instances of a class within a single page. The function functions perfectly when there is only one instance on the page: $(document).ready(function() { ...

javascriptjqueryajax

Modify the text color of the sliderInput element within a Shiny application

I am attempting to change the font color of the values (1,2,3,...10) in the sliderInput() from black to white, but I am encountering difficulties. How can I connect the slider with the CSS file to achieve this? ui <- fluidPage( tags$style(type = &quo ...

cssrshiny

Tips on retrieving an input value from a dynamic list

I am struggling to retrieve the correct value with JavaScript as it always shows me the first input value. Any help would be greatly appreciated! Thank you in advance! <html> <head> </head> <body> <?php while($i < $forid){ ...

javascriptphpmysqli

Retrieve an object that includes a property with an array of objects by filtering it with an array of strings

I have a large JSON file filled with data on over 300 different types of drinks, including their ingredients, names, and instructions. Each object in the file represents a unique drink recipe. Here is an example of how one of these objects is structured: ...

javascriptarraysjsonobject

Angular firing a function in the then clause before the initial function is executed

I have a situation where I need to make multiple service calls simultaneously, but there is one call that must be completed before the others are triggered. I have set it up so that the other calls should only happen after the .then(function() {}) block of ...

javascriptangularjstypescriptangular-promise

It seems that Firefox is ignoring the word-wrap style when the class of a child element is changed

Take a look at this: var iconIndex = 0; var icons = ['check', 'chain-broken', 'flag-o', 'ban', 'bell-o']; $('button:eq(0)').click(function() { iconIndex = (iconIndex + 1) % icons ...

javascriptjqueryhtmlcssfirefox

Is there a way to deactivate the onClick event when the dropdown placeholder is chosen?

I have experimented with different methods to prevent the onClick event when selecting either placeholder, but I have not been successful. Here is my current code: <div class="choosesign"> <div class="zodiacs"> < ...

javascriptonclickdropdown

Trouble with the ejs <%- body %> rendering properly

I plan to utilize a predefined layout template named layout.ejs, and here is the code present in the file: <html> <head> <title></title> </head> <body> <%- body %> </body> </html> Currently, I ...

javascriptnode.jsexpressejs

I am facing an issue where my Tailwind classes are not functioning properly when passed through props, but they work seamlessly when I directly link the Tailwind CSS using

//Button.jsx import React from 'react'; const Button = (props) => { let color = props.color || 'blue'; return ( <button className={`px-4 py-2 font-bold text-black bg-${color}-500 rounded-full hover:bg-${color}-700 focus ...

htmlcssreactjstailwind-cssvite