Iterating through two classes in a Javascript loop

Question

Iterating through two classes in a Javascript loop

Hello, I'm facing a small obstacle that I'm hoping to overcome using JavaScript/jquery. Essentially, I have multiple div classes and I want to create a loop that adds a class to specific divs without manually assigning an id to each one. The goal is to dynamically add an id or class using JavaScript code.

Here's an example of what I'm trying to achieve:

<div></div><div></div>    
<div></div><div></div>
<div></div><div></div>    
<div></div><div></div>

Currently, I have a structure where two divs form a row. I want to dynamically add a class in a specific pattern to achieve the following layout:

<div class="green"></div>           <div></div>    
<div></div>                         <div class="green"></div>
<div class="green"></div>           <div></div>    
<div></div>                         <div class="green"></div>

It seems like I will need to implement a loop that targets every two divs and repeats the process in reverse.

javascript jquery html css

Answer 1

Answer №1

using jquery

Implement this code snippet in order to apply a class to every second div element.

Check out the DEMO here

 $('div').each(function(i){
   if((i%3) === 0){
    $(this).addClass('green')
   }
 });

Utilizing the :odd and :even selectors

View the DEMO here

 $( "div:odd" ).addClass( "green" );

For the even div elements

 $( "div:even" ).addClass( "green" );

Answer 2

using jquery

Implement this code snippet in order to apply a class to every second div element.

Check out the DEMO here

 $('div').each(function(i){
   if((i%3) === 0){
    $(this).addClass('green')
   }
 });

Utilizing the :odd and :even selectors

View the DEMO here

 $( "div:odd" ).addClass( "green" );

For the even div elements

 $( "div:even" ).addClass( "green" );

Answer 3

Answer №2

Essentially, what you're looking for is the Zig-Zag pattern.

No need for loops here. You can achieve this using the :nth-child selector like so:

$('div:nth-child(4n+1)').addClass('green'); // Selects 1, 5, 9, 13, ...
$('div:nth-child(4n)').addClass('green'); // Selects 4, 8, 12, 16, ...

See Demo

Check out the pure CSS demonstration below.

body {
  width: 120px;
}
div {
  height: 50px;
  width: 50px;
  background: red;
  margin: 5px;
  float: left;
}
div:nth-child(4n+1) {
  background: green;
}
div:nth-child(4n) {
  background: green;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 4

Essentially, what you're looking for is the Zig-Zag pattern.

No need for loops here. You can achieve this using the :nth-child selector like so:

$('div:nth-child(4n+1)').addClass('green'); // Selects 1, 5, 9, 13, ...
$('div:nth-child(4n)').addClass('green'); // Selects 4, 8, 12, 16, ...

See Demo

Check out the pure CSS demonstration below.

body {
  width: 120px;
}
div {
  height: 50px;
  width: 50px;
  background: red;
  margin: 5px;
  float: left;
}
div:nth-child(4n+1) {
  background: green;
}
div:nth-child(4n) {
  background: green;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 5

Answer №3

HTML:

<div class="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>
    <div class="box">E</div>
    <div class="box">F</div>
</div>

Vanilla Javascript:

var containers = document.getElementsByClassName("container");

for (var x = 0, xx = containers.length; x < xx; x++) {
    var container = containers[x],
        boxes = container.children;

    for (var y = 0, yy = boxes.length; y < yy; y++) {
        var item = boxes[y];
        if (y % 2 === 0) {
            item.classList.add("highlight");
        }
    }
}

Demo

OR

Using jQuery:

$(".box:even").addClass("highlight");

Demo

Answer 6

HTML:

<div class="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>
    <div class="box">E</div>
    <div class="box">F</div>
</div>

Vanilla Javascript:

var containers = document.getElementsByClassName("container");

for (var x = 0, xx = containers.length; x < xx; x++) {
    var container = containers[x],
        boxes = container.children;

    for (var y = 0, yy = boxes.length; y < yy; y++) {
        var item = boxes[y];
        if (y % 2 === 0) {
            item.classList.add("highlight");
        }
    }
}

Demo

OR

Using jQuery:

$(".box:even").addClass("highlight");

Demo

Answer 7

Answer №4

To add a decorative touch with alternating backgrounds, you can utilize the CSS pseudo-classes nth-child(even) or nth-child(odd) as demonstrated in the example below:

tr:nth-child(even) {background: #CCC} 
tr:nth-child(odd) {background: #FFF}

Answer 8

To add a decorative touch with alternating backgrounds, you can utilize the CSS pseudo-classes nth-child(even) or nth-child(odd) as demonstrated in the example below:

tr:nth-child(even) {background: #CCC} 
tr:nth-child(odd) {background: #FFF}

Answer 9

Answer №5

One way to access your div elements is by using a for loop along with the childNodes() method in JavaScript. If the element's index is an odd number, you can manually add your desired class to it.

Here is an example:

var elements = parentElement.childNodes();

for (var j = 0; j < elements.length; j++) {
    if (j % 2 === 0) continue;

    elements[j].className = "highlight";
}

Answer 10

One way to access your div elements is by using a for loop along with the childNodes() method in JavaScript. If the element's index is an odd number, you can manually add your desired class to it.

Here is an example:

var elements = parentElement.childNodes();

for (var j = 0; j < elements.length; j++) {
    if (j % 2 === 0) continue;

    elements[j].className = "highlight";
}

Iterating through two classes in a Javascript loop

Answer №1

Answer №2

Answer №3

OR

Answer №4

Answer №5

Similar questions

Is it possible to modify the spacing of menu items in the React Material-ui Drawer component?

Enhanced efficiency in the interaction between front-end JavaScript and back-end JavaScript

No response observed upon clicking on the li element within the personalized context menu

Creating a user-friendly navigation menu: A step-by-step guide

Is it possible for me to transform this code into a useful helper function?

Tallying discarded objects post removal from drop zone

"Looking to disable the browser shortcut for ctrl-N and instead trigger a function when this key combination is pressed? Check out the JS Fiddle example provided below

Encountering an "Error: Invalid string length" while attempting to iterate over the JavaScript object

What is causing the auto-fill property in CSS Grid to malfunction when used in a vertical column direction?

Updating the variables of HTML components using JavaScript after making an AJAX request

Is it advisable to prevent Set and Map from having unspecified generics in TypeScript?

Excessive CPU/GPU usage caused by CSS transition animations

The hover effect for a :before class is not functioning as intended

The Next.js component only appears after a page reload

Challenges encountered with pagination functionality within Datatables integration

Looking to transmit data to your HTML page and incorporate AJAX for your Single Page Application on a NodeJS server with express.js framework?

Do not apply hover effect to a particular child div when the hover effect is already applied to the parent

What is the process of adding a unique model to three.js?

What strategies can I implement to ensure my modal dialog box remains responsive? Adjusting the window size causes the modal box to malfunction and lose its structure

populating a HTML image tag 'src' attribute with data extracted from API javascript code