Hi I've got a small issue but not sure how to solve it by javascript/jquery. Essentially ive got several div classes but what i want to do is to create a loop to add a class on certain divs, without having to add an id on them manually but to add a id or class through the javascript code.

Heres an idea of what i mean:

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

This is what i currently have so lets say two divs will be a row. I want it so a a class is added in a certain way to make it like this:

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

So i am guessing it will be some sort of loop for every 2 divs then it will repeat in reverse.

Hi I've got a small issue but not sure how to solve it by javascript/jquery. Essentially ive got several div classes but what i want to do is to create a loop to add a class on certain divs, without having to add an id on them manually but to add a id or class through the javascript code.

Heres an idea of what i mean:

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

This is what i currently have so lets say two divs will be a row. I want it so a a class is added in a certain way to make it like this:

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

So i am guessing it will be some sort of loop for every 2 divs then it will repeat in reverse.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 10, 2015 at 8:50 Tushar 87.3k2121 gold badges163163 silver badges181181 bronze badges asked Jul 10, 2015 at 8:32 jsgjsg 1,26477 gold badges2323 silver badges4646 bronze badges 6

• I think that if you wrap in columns you can: <div class="column"><div/><div/><div/><div/></div><div class="column"><div/><div/><div/><div/></div>. This mixes with :odd (in css or jquery, like you need), and it works – Marcos Pérez Gude Commented Jul 10, 2015 at 8:42
• FYI, indentate HTML markup like this doesn't make really sense – A. Wolff Commented Jul 10, 2015 at 8:44
• In a ment you and I can't indentate anything. I wish that you understand it. – Marcos Pérez Gude Commented Jul 10, 2015 at 8:49
• @MarcosPérezGude I'm not sure your last ment was for me BUT mine was for OP, not regarding your posted code in ment (even it's invalid one) :) – A. Wolff Commented Jul 10, 2015 at 8:51
• @jsg BUT why don't you use TABLE??? – A. Wolff Commented Jul 10, 2015 at 8:51

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 4

using jquery

Use this loop to add class after 2 div

DEMO

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

using :odd and :even selector

DEMO

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

for even

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

Basically you want Zig-Zag.

There is no need of loops. You can use :nth-child selector as follow:

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

Demo

Here is the pure CSS Demo.

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>

HTML:

<div class="wrapper">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
    <div class="element">6</div>
</div>

Pure Javascript:

var parents = document.getElementsByClassName("wrapper");

for (var i = 0, ii = parents.length; i < ii; i++) {
    var parent = parents[i],
        children = parent.children;

    for (var j = 0, jj = children.length; j < jj; j++) {
        var elem = children[j];
        if (j % 2 === 0) {
            elem.classList.add("highlight");
        }
    }
}

Demo

OR

jQuery:

$(".element:odd").addClass("highlight");

Demo

If just for show different background, you may use css nth-child(even) or nth-child(odd), as should sample in the table:

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

You can grab your divs with a for loop using childNodes () javascript function. If the index is odd then you can apply manually your class.

something like this:

var nodes = parentElement.childNodes();

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

    nodes[i].className = "green";
}