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

Having trouble with Vue.js implementation of Bootstrap tab navigation?

I am currently working on a vue.js application that consists of 2 routed components. I recently attempted to integrate a bootstrap tab navigation into the first component, but unfortunately, the tab contents are not being properly displayed. <templat ...

javascripthtmlcsstwitter-bootstrapvue.js

I am just starting to explore firebase and I'm having trouble organizing my data. I've attempted to use the query function and orderBy

After experimenting with query and orderBy() methods, I'm still struggling to properly integrate it into my code. Here's what I have so far: Methods: async saveMessage(){ try { const docRef = await addDoc(collection(db, "chat"), ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Incorporate a fontawesome icon into a dynamically created button using ajax

Is it possible to insert fontawesome icons into a button created using this code snippet? $.each(response, function (i, item) { trHTML += '<tr><td>' + item.name + '</td><td>' + "<input type='button&apo ...

javascriptjqueryhtmlajaxbutton

PHP Form Submission Issue

I'm currently facing an issue with submitting a form using PHP and PHPMailer. Initially, I created a form based on the complete form example from w3schools. After that, I attempted to send the form via email by integrating PHPMailer, but unfortunatel ...

phphtmlforms

Rails Navigation Issue: JQuery Confirmation Not Functioning Properly

Having a Rails app, I wanted to replicate the onunload effect to prompt before leaving changes. During my search, I came across Are You Sure?. After implementing it on a form, I noticed that it only works on page refreshes and not on links that take you a ...

javascriptjqueryruby-on-rails

Issue encountered while attempting to install datagrid library with Nuxt3

Currently, I am working on a Nuxt3 project and attempting to integrate the " @revolist/vue3-datagrid" library. Following the instructions provided in the library's documentation, I executed the command "npm i @revolist/vue3-datagrid --save". Unfortuna ...

javascriptnpmnuxt.jsvuejs3nuxtjs3

What is the best way to interpret numerous rows of Form elements simultaneously?

What is the most efficient way to name form elements across rows for easy conversion into JSON format? Considering HTML does not have built-in Array support, what alternative method should be used? In each row, there are 2 text fields and 1 select dropdow ...

javascriptjqueryhtmljson

The :contains method in jQuery functions smoothly in Firefox, Safari, and Chrome, but unfortunately does not work

My code on JSFiddle is having some compatibility issues with the jQuery :contains selector specifically in Internet Explorer versions 7, 8, and 9. The code works fine in Firefox, Safari, and Chrome. You can find the working code here. I tried making the ...

javascriptjqueryxmlinternet-explorerjsfiddle

What is the process for activating focus on an input element within a mat-select component?

How can I activate the cursor on the HTML input element (search field) using a keyboard inside mat-select? It functions properly when using a mouse, but in order to meet WCAG requirements, it needs to be fully functional with keyboard navigation. Click h ...

javascriptangularangular-material

What is the best way to adjust the spacing between components to prevent overlapping?

I'm looking to adjust the spacing between the textfield and button components so they don't overlap. I want to create some space between them but I'm not sure how to achieve this. I'd like to have at least 1-2 spaces added between the ...

javascriptreactjsmaterial-ui

Discover the geolocation data for post code 0821 exclusively in Australia using Google Maps Geocoding

I'm having trouble geocoding the Australian postcode 0821. It doesn't seem to reliably identify this postcode as being located within the Northern Territory, unlike 0820 and 0822 which work fine. Here's an example of what I'm doing: ...

javascriptgoogle-mapstypescriptgoogle-geocoder

A guide on how to insert content into a text area using a drop-down menu choice

I'm a total beginner at this. Is it possible to use JavaScript to automatically fill in a text area on an HTML form based on what is selected in a drop-down menu? If so, can someone please explain how to achieve this? ...

javascripthtml

Incorporating @font-face webfonts into a Jekyll project

I'm currently working on incorporating webfonts into a Jekyll build. Interestingly enough, the fonts show up perfectly fine when I view them locally, but once I push my project to a live environment, the fonts mysteriously disappear. To make matters w ...

htmlcssfontsjekyllwebfonts

Step-by-step guide on how to index timestamp type using Knex.js

I'm in the process of indexing the created_at and updated_at columns using knex js. However, when I try to use the index() function, I encounter the following error: Property 'index' does not exist on type 'void' await knex.sche ...

javascriptnode.jstypescriptpostgresqlknex.js

Exploring the effectiveness of React Hook Form using React Testing Library

My Component includes a form that, upon submission, utilizes Apollo's useLazyQuery to fetch data based on the form values. The form in the component is managed by React Hook Forms, with the handleSubmit controlled by RHF. <FormContainer onSubmit= ...

javascriptreactjsnext.jsgraphqlreact-testing-library

Issue with AJAX function not initiating PHP script upon subsequent button clicks

My button has the following function: $(function() { $("#submit").click(function(){ $.ajaxSetup({ cache: false }); $.ajax({ url:'crfile.php', type:'GET', }); }); }; When clicked ...

phpjqueryajax

Passing a variable into the highcharts function using jquery and pug is proving to be a challenge for me

I am facing an issue while trying to pass a variable into the Highcharts function using jquery and pug. This variable is essential for setting data in series. In order to tackle this problem, I have created a function called getData in my index.js file whi ...

jquerynode.jsexpresshighchartspug

Creating a duplicate of a Flex object in HTML without the need to reinitialize

I'm currently developing a flash object that involves processing a large number of images. My goal is to load multiple flash objects on the same page in order to capture an image, make adjustments, and then display it within each flash object. Howeve ...

javascriptapache-flexflashimage

Unable to delete element from the given array

I have been working on removing instances of 'store.state.location.locations' from my locationData array that should no longer be there, but for some reason, they are persisting in the array even though I am no longer passing those instances. ta ...

javascriptvue.jsmapbox

What is the best way to automatically increase the value of another column in SQL when the primary key is set to auto

In my database, I currently have a table storing customer details. I am looking to introduce a new column that will provide either existing or new customers with a unique auto-incremented ID for identification purposes. Additionally, I require a primary ke ...

phphtmlmysqlauto-increment