Use jQuery to swap out every nth class name in the code

I am looking to update the 6th occurrence of a specific div class.

This is my current code

<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div> this should be changed
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div> this should be changed
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div> this should be changed
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>

The count of changes is undefined and can vary in each section.

javascriptjqueryhtmlcss

Answer №1

Give this a shot:

$( "div:nth-child(6n)" ).removeClass("disp");

Alternatively,

$( "div.disp:nth-child(6n)" ).removeClass("disp");

Answer №2

<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div> 
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp">...</div>
<div class="disp)">...</div>
<div class="disp">...</div>
<div class="disp)">...</div>
<div class="disp">>.</div>

Creating this effect using only CSS

div {
    width:50px;
    height:50px;
    background:black;
    margin:10px;
}

section > div:nth-child(6n) {
    background:red;
}

You can achieve the same result using jQuery as well

 $( "div:nth-child(6n)" ).removeClass("disp");

For more information, you can visit this link

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

Tips for ensuring the vertical scroll bar is always visible on a div element

I need help with maintaining a vertical scroll bar on a div regardless of its height. .myclass { overflow-y: scroll; } <div class="myclass"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the in ...

javascripthtmljquerycss

Add the text received from the Ajax request to an array specifically designed for AmCharts

Hello, I'm new to JavaScript and seeking assistance. My goal is to create a chart with real-time data from my MCU, but I'm unsure about pushing a string into an array. Currently, the Array (chart.dataProvider) in this code remains undefined. var ...

javascriptajaxhttptcp

The standard process and organization of a project using AngularJS in conjunction with Python Flask

As someone new to the MV* client-side framework craze, I find myself leaning towards AngularJS over Knockout, Ember, or Backbone. However, I'm unsure about the workflow involved. Should I start by developing a client-side application in AngularJS and ...

javascriptpythonflaskangularjs

Effortlessly transfer files with Ajax through Box

I attempted to utilize the Box.com API for file uploads according to instructions from https://gist.github.com/seanrose/5570650. However, I encountered the following error message: `XMLHttpRequest cannot load "". No 'Access-Control-Allow-Origin&ap ...

javascriptajaxbox-apiboxboxapiv2

Vuefire encountering an issue with Vue 3 and throwing a Vue.use error

After setting up a Vue app and importing Vue from the vue module, I encountered an issue: ERROR in src/main.ts:4:5 TS2339: Property 'use' does not exist on type 'typeof import("/data/data/com.termux/files/home/ishankbg.tech/node_modules/vue/ ...

javascripttypescriptvue.jsvuejs3vuefire

Preventing Jquery from showing an image when validation fails using PHP or Jquery

I recently implemented an ajax add to cart feature using jQuery. When a button is clicked, data is sent to a PHP page via jQuery, the data is processed and returned as variables, then the item is added to the cart. A confirmation message along with an imag ...

phpjqueryvalidation

What is the best method for typing a component prop that is compatible with singular use and can also function within loops without disrupting intellisense?

The Scenario Within a heading component, I have defined various types as shown below: // Heading/index.d.ts import { HTMLAttributes } from 'react'; export const HeadingType: { product: 'product'; marketing: 'marketing'; ...

javascriptreactjstypescriptintellisenseprop

Importing multiple modules in Typescript is a common practice

I need to include the 'express' module in my app. According to Mozilla's documentation, we should use the following code: import { Application }, * as Express from 'express' However, when using it in TypeScript and VSCode, I enc ...

javascripttypescript

Struggling to make the Bootstrap 4 Datatables example work on my website

Trying to implement the code example from the second snippet in the answer of this thread Bootstrap - How to sort table columns. Should I just insert the js snippet into a script tag in the html or am I misunderstanding how it should be done? I also attemp ...

htmldatatables

Reading complex table structures with Selenium

Incorporating Selenium into my Java project, I am on a mission to purchase coupons during a test and subsequently display them in the coupon overview. Multiple coupon packages can appear in this area if the user has previously made purchases. The structur ...

javahtmlseleniumselenium-webdriver

Upgrade to the most recent versions of packages using npm

When using npm install --save <package_name>, it typically installs the latest stable version of the package. If you want to specifically install the most recent release, such as Bootstrap v4, you would need to use npm install <a href="/cdn-cgi/l ...

javascriptnode.jstwitter-bootstrapnpmnpm-install

Displaying jQuery AJAX response through the use of a PHP script as a middle

After setting up an AJAX request that functions correctly, I encountered a problem with retrieving and displaying the data received from the request. Here's the script in question: var input = $("#input").val(); $(".pure-button").click(function() { ...

jqueryajax

Using jQuery flot to create various time charts

I'm trying to combine the visitor count data from this month (chart 1) and last month (chart 2) into a single chart using Flot. While I've successfully created chart 1, I'm facing challenges in overlaying it with chart 2 due to the x-axis pa ...

jqueryjsonflot

Develop a PHP Ajax jQuery UI Progressbar to track the progress of a lengthy MySQL task

My PHP script is taking a long time to run due to frequent SOAP calls to another website. I want to add a progress bar to track the completion percentage of this operation. I think the best approach is to use asynchronous Ajax calls to execute the PHP scr ...

phpjquerymysqlajaxjquery-ui-progressbar

What is the best method for converting a string picture URL into an image and showcasing it in an image tag?

I have a URL for an image that looks like this: C:\inetpub\MaujApp\OMSAPI\ManualReceivingImages\WhatsApp Image 2021-03-24 at 12.07.41 PM.jpeg My goal is to convert the original image and display it to the user using jQuery. I woul ...

javascriptc#jqueryasp.netajax

Enabling Multiple Login Feature in Node.js

const handleLogin = async (req, res) => { const User = require("../models/user"); const LoginInfo = require('../models/login_info'); try { const { email, mobile, password, otp } = req.body; const params = []; if(ema ...

javascriptreactjsnode.js

Exclusive Modal Pop-Up for First-Time Visitors - Utilizing Bootstrap, PHP, and JavaScript

Seeking assistance from the community as I have exhausted my online research efforts. I am currently working on implementing a welcome bootstrap modal in a php environment. Despite being new to php and js, I have managed to make it pop up only once using ...

javascriptphpbootstrap-modalsimplemodal

Error: Attempting to access property 'PRM_ServerError' on an undefined object is not permitted

After deploying my code to the QA server for testing, I discovered that my image button was not triggering an event. This issue did not occur on the development server. To investigate further, I compared the console output between my local environment and ...

javascriptc#jqueryajaxdeployment

Dynamic Bootstrap Modal Widget

I have been attempting to create a dynamic modal using Twitter Bootstrap as shown below: $('#myModal').on('hide', function () { $(this).removeData('modal'); $('.loading-modal').remove(); }) Although it rel ...

javascriptjqueryajax

Transforming the API response

After making an Ajax call, the response received is: console.log(data); {"valid":true,"when":"Today"} Attempting to read the response like this: var res = data.valid; console.log(res); results in 'undefined' being displayed. To address this i ...

javascriptjqueryajax