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

Transforming PHP JSON into JavaScript with getJSON

Hello everyone, I must admit my lack of knowledge in javascript/ajax as I am struggling to convert this php json into a javascript function $json = file_get_contents('http://videoapi.my.mail.ru/videos/mail/alex.costantin/_myvideo/4375.json'); ...

javascriptphpjqueryajaxjson

What is the process of extracting a utility function from a helper file on a node.js server?

I'm facing a challenge with my node/express server where I need to access a function from a helper file in my app.js. The function in the helper file looks like this: CC.CURRENT.unpack = function(value) { var valuesArray = value.split("~"); ...

javascriptnode.jsreactjsexpress

When adding classes using Angular's ng-class, CSS3 transitions are not activated

After creating a custom modal directive in Angular, I am encountering an issue with the transition animation not working as expected. Within my directive's isolated scope, there is a method called toggleModal() that toggles the modalState between true ...

angularjscss

Discovering the nearest sibling using jQuery

My HTML code snippet is as follows: $(".remove-post").click((event) => { $(event.target).fadeOut(); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="side-bar"> <b ...

javascriptjquery

Dealing with the challenge of managing multiple instances in a setup involving Ajax long polling (comet) and PHP on Lighttpd v1

I am a newcomer to this platform, so I hope to provide all the necessary details about my question. I have been attempting to set up a mechanism for "new message arrived notification" using long polling. Currently, I am triggering the polling request thro ...

phpjavascriptajaxcometlong-polling

The Bootstrap navigation menu is functioning properly when opening, but has an issue when attempting

Creating a mirrored version of an HTML file using NuxtJS, I've included the following code snippet in the Navbar component for my NuxtJS project. <template> <section id="navigation-menu" class="menu menu3 cid-sLhoPz7Ycg" ...

javascripthtmlvue.jsbootstrap-4nuxt.js

What is the best way to create a border for the active class nav-item in Bootstrap 4?

I am facing an issue with changing styles in the nav-item. I have created a separate style sheet and added the necessary code to make the changes. Surprisingly, the changes are reflecting well in Internet Explorer but not in Firefox. Can anyone guide me on ...

cssbootstrap-4

Techniques for transferring PHP print_r arrays to Javascript

Array ( [0] => Array ( [sno] => 1 [name] => Sivamani [contact] => 750241378 [$city] => Madurai ) ) Array ( [1] => Array ( [sno] => 2 ...

phpjavascript

Verify whether the current directory includes a package.json file with a matching name value

When I run a custom command in the terminal, I am attempting to achieve two objectives: Verify if there is a package.json file in the current directory (similar to checking for the existence of process.cwd() + '/package.json'). Determine if the ...

javascriptnode.jsnpmnode-modules

Guide to utilizing JavaScript and JQuery for retrieving a PDF from a specific URL and subsequently uploading the file to another website

I have a link to a PDF file: http://www.example.com/HelloWorld.pdf My objective is to download the file using JavaScript/JQuery/AJAX and temporarily store it in the browser, without saving it on the user's machine. Then, I want to POST it to . To ac ...

javascriptjqueryajaxpdf

Discovering the variable name that holds the maximum number following the usage of Math.max()

Let's assume we have the following variables set: var number1 = 48; var number2 = 420; var number3 = 39; If we want to determine the highest value among them, we can use: let maximumValue = Math.max(number1, number2, number3); What if we want to kno ...

javascript

Is it possible to create this layout using Bootstrap 5? I want to stack spans, with one inside the container and one outside

Trying to achieve a specific design using Bootstrap 5.3. https://i.sstatic.net/STifm.jpg This design should be placed over the showcase, with the following code for the showcase displayed below: <div class="showcase d-flex flex-column"&g ...

htmlcssbootstrap-5

Adjusting the width of a nested iframe within two div containers

I am trying to dynamically change the width of a structure using JavaScript. Here is the current setup: <div id="HTMLGroupBox742928" class="HTMLGroupBox" style="width:1366px"> <div style="width:800px;"> <iframe id="notReliable_C ...

javascriptjqueryhtmliframewidth

Utilize Jquery and MVC 5 to create a reoccurring partial view

I have a button that triggers the loading of a partial view containing a table with all the categories in my system. <input type="button" value="Load Categories" id="btnLoadCategories" /> This loading process is done via a partial view which is in ...

javascriptjqueryajaxasp.net-mvcpartial-views

"Combining jQuery and JavaScript to handle form submissions in un

What happens when you combine the Javascript onSubmit handler and jQuery submit handler? <form action="" method="post" onSubmit="myJavascriptHandler();"> <input type="submit" /> </form> <script type="text/javascript"> $("form") ...

javascriptjquery

Enhancing the performance of your code by optimizing it using jQuery when a checkbox is either checked or

Looking for ways to optimize a jquery function that toggles a URL parameter based on checkbox status. Any suggestions on how to streamline this code? $('#mapControl').live('click', function(){ var thisUrl = $(location).attr(' ...

javascriptjquerycheckbox

Looking for a custom header logo that seamlessly blends with your image slider?

I'm just starting to learn about HTML and I'm trying to create a header with a logo overlapping on an image slider. I followed the method mentioned in this post: How would you make two <div>s overlap? Unfortunately, I'm still having t ...

htmlcss

Using a single AJAX function to write on various tags

Information regarding the likes and dislikes count is retrieved from the server using an ajax function with the following queries: $q3="select count(value) as a from rank where personID='$person' and itemID='$itemID' and value>0 ...

phphtmlajax

Error in Leaflet: Uncaught TypeError: layer.addEventParent is not a function in the promise

Having trouble with Leaflet clusterGroup, encountering the following error: Leaflet error Uncaught (in promise) TypeError: layer.addEventParent is not a function const markerClusters = new MarkerClusterGroup(); const clusters = []; const markers = []; co ...

javascriptvue.jsdictionaryleaflet

Drag the label into the designated paragraph to copy the text. Click on the specific point to transfer the text

How can I copy the text from a label to a specific point by dragging it? <label id="text_to_be_copied" > i am a student </label> Below is a paragraph where I want to paste the copied text: <p> this is the content where I want to copy t ...

javascriptjqueryhtmldrag-and-drop