Using jQuery to retrieve child elements and assign numerical values to them

Looking for a jQuery function that can apply different CSS attributes to children elements of a div.

<div class="container">
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
</div>

The divs within the container are automatically generated.

The children elements should have the following CSS attributes:

First child: animation-delay: 1s;

Second child: animation-delay: 2s;

Third child: animation-delay: 3s;

...

Attempted using nth-child selector in CSS without success, seeking a jQuery solution now.

javascriptjqueryhtmlcsschildren

Answer №1

One can achieve the desired effect without relying on Javascript or jQuery. Instead of using nth:child, simply utilize :nth-child(n):

.container > :nth-child(1) {
  animation-delay: 1s;
  color: red;
}
.container > :nth-child(2) {
  animation-delay: 2s;
  color: blue;
}
.container > :nth-child(3) {
  animation-delay: 3s;
  color: green;
}
.container > :nth-child(4) {
  animation-delay: 4s;
  color: brown;
}
<div class="container">
  <div class="autogenerated-div">OOO</div>
  <div class="autogenerated-div">OOO</div>
  <div class="autogenerated-div">OOO</div>
  <div class="autogenerated-div">OOO</div>
  <div class="autogenerated-div">OOO</div>
  <div class="autogenerated-div">OOO</div>
  <div class="autogenerated-div">OOO</div>
  <div class="autogenerated-div">OOO</div>
</div>

Answer №2

Here is a snippet of code that will add the desired css attribute to elements:

$( ".container>div.autogenerated-div" ).each(function( index ) {
  $(this).css("animation-delay",(index+1)+"s");
});

You can view and test this code on JSFiddle: https://jsfiddle.net/wxhrks0x/

If you prefer, you can achieve the same result using CSS less without jQuery:

@iterations: 8;
.autogenerated-div-loop (@i) when (@i > 0) {
  .autogenerated-div-@{i} {
    animation-delay: ~"@{i}%"s;
  }
  .autogenerated-div-loop(@i - 1);
}
.autogenerated-div-loop (@iterations);

Answer №3

Working effectively with nth-child

div.autogenerated-div:nth-child(1) {
  width: 20px;
  height: 10px;
  background-color: red;
  animation: newcolor 1s ease;
  animation-delay: 1s;
}

div.autogenerated-div:nth-child(2) {
  width: 20px;
  height: 10px;
  background-color: blue;
  animation: newcolor 1s ease;
  animation-delay: 2s;
}

div.autogenerated-div:nth-child(3) {
  width: 20px;
  height: 10px;
  background-color: green;
  animation: newcolor 1s ease;
  animation-delay: 3s;
}

@keyframes newcolor {
  to {
    background-color: black;
  }
}
<div class="container">
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
</div>

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

Error Encountered While Creating a Polygon Wallet on Fireblocks

After following the instructions from Fireblocks Docs, I successfully created a default wallet named "BTC_TEST" like this: enter image description here. However, when attempting to create a Matic wallet, I encountered an Axios Error. Despite Matic being a ...

javascriptnode.jsblockchainfireblocks-sdkfireblocks-api

Encountered a connection error in the Spring Boot application: net::ERR_CONNECTION_REF

Currently working on a school project developing a Spring Boot application using Restful. The application runs smoothly locally, but when deployed to AWS, I am encountering an "net::ERR_CONNECTION_REFUSED" error for all my GET and POST requests sent to the ...

javascriptjavaspringspring-boot

Leveraging data generated by a CasperJS script within an AngularJS application

After using yeoman.io to create an angular.js single page application, I found myself with app.js managing routes, mycontroller.js scripts, and an index.html file filled with "bower_components" references for libraries installed through the command line us ...

javascriptangularjsnode.jscasperjs

Discovering back-to-back days

I am currently working on a PHP script that utilizes a MySQL database to calculate various climatological parameters based on different variables. While I have successfully completed most of the calculations, there is one particular task that I am struggli ...

phphtmlmysql

Pulling JavaScript - referencing an external script

I am currently facing a challenging dilemma that requires a simple yet intricate solution. My objective is to develop a script capable of playing chess on my behalf, utilizing an engine to determine the optimal moves for pieces such as rooks, bishops, king ...

javascriptjquerymouseevent

Positioning elements within a Bootstrap column: Fixed versus Absolute positioning

Striving to maintain the absolute positioning of the right column as users scroll through the left column has proven to be a challenging task. Despite exploring various solutions from stackoverflow and google, none seem to effectively address this issue. ...

htmlcsstwitter-bootstrapreactjs

Executing a function that includes showModalDialog outside of an iframe might display the incorrect page

This website structure looks like: `--main.html `--dialog.html `--folder `--iframe.html The code for each page is as follows: main.html: <html> <head> <script type="text/javascript"> function t ...

javascriptiframe

Incorporate a JavaScript array into a TypeScript document

Having a file named array.js with a large collection of strings, structured like this: module.exports = ["word1","word2",...] I attempted to utilize this array in my validation.ts file by adding the following line: let wiki = require('./array.js&a ...

javascriptnode.jsexpresstypescript

Leveraging AJAX for implementing PHP scripts

While I may not be an MVC model expert, I'm trying to keep my page design separate from my logic in order to simplify things. I have already created a basic template and now I want hyperlinks to open PHP files within the same page. For example: Next ...

phpjavascriptjqueryhtmlajax

div layout; sidebar movements occur after appending div to the header

Having trouble mastering layouts, I am attempting to create a full-width header that includes a left sidebar and a right sidebar. The body is split into 5 sections: full width, left and right sidebars, center content with 3 columns, and the footer mirrorin ...

csshtml

Trimmed scrollbar and border in Webkit

There seems to be some clipping on the scrollbar and border of the textarea: <!DOCTYPE html> <html> <head> <meta charset="UTF-8> <title>Scrollbar and Border Clipping Issue in Webkit</title> <style> ...

htmlcsswebkittextareascrollbar

Is selectpicker acting up?

Currently, I am troubleshooting a filter feature on a website that utilizes jQuery with JSON data. Everything was functioning properly until recently when an error started appearing: The selectpicker function is not recognized I would greatly appreciat ...

javascriptjqueryjsonbootstrap-4bootstrap-selectpicker

The file that is currently being downloaded has the .pptx extension, but it is being

Take a look at this code snippet: const generateDownload = ({ link, data, title, settings })=> { const newLink = document.createElement('a'); const blobUrl = link || URL.createObjectURL(new Blob([data], settings)); newLink.setAt ...

javascriptreactjstypescriptfileurl

Invoking a REST API synchronously using JavaScript

I am just starting out with JavaScript and the npm ecosystem. I am attempting to upload data to my REST service using a POST call. The data is being fetched from a CSV file, which is going well so far. For each line of data that is fetched, I convert it as ...

javascriptnode.jsrestnpmsynchronization

Popup showing values that are not defined

I've encountered an issue with tooltips on my bar graph. The tooltips should display the values of boarding and alightings corresponding to each stopname column, but I'm seeing undefined values like this Below is my code snippet: <!DOCTY ...

javascriptd3.jstooltip

Retrieve the response status using a promise

There is a promise in my code that sometimes results in an error response (either 400 or 403, depending on the user). I am trying to handle this situation by catching the response and implementing a conditional logic to execute different functions based on ...

javascriptreactjstypescriptsharepoint

Sending information back to the server without causing a postback, all while remaining unseen

I have a straightforward JavaScript function on my ASP.NET page that writes data to a hidden field. However, in order to retrieve this data the form needs to be submitted back to the server. The issue is that submitting the form causes the page to reload ...

javascriptajax

Is there a way to retrieve the id of the parent element containing the PHP code using PHP?

I need to verify if the php code being executed is located within a div named "parent2". Currently, I am customizing a Joomla HTML override and attempting to place one module in two different positions. If the module is contained within parent2, then spe ...

phphtmljoomla

What is the best method for transforming a stream into a file with AngularJS?

Currently, I have a server returning a file stream (StreamingOutput). My goal is to convert this file stream into an actual file using AngularJS, javascript, JQuery, or any other relevant libraries. I am looking to display the file in a <div> or ano ...

javascriptjqueryhtmlangularjsangularjs-directive

Using Jquery to add new HTML content and assign an ID to a variable

Here is some javascript code that I am having trouble with: var newAmount = parseInt(amount) var price = data[0]['Product']['pris']; var id = data[0]['Product']['id']; var dat ...

javascriptjqueryhtml