Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="box">Item 1</div>
<div class="box">Item 2</div>
<div class="box">Item 3</div>
<div class="box">Item 4</div>
<div class="box">Item 5</div>
<div class="box">Item 6</div>
<div class="box">Item 7</div>
<div class="box">Item 8</div>
<div class="box">Item 9</div>
<div class="box">Item 10</div>
<div class="box">Item 11</div>
<div class="box">Item 12</div>
</body>
</html>
 
.red { color: red; }
.green { color: green; }
.blue { color: blue; }
​
/* You could also keep this out of JS by using nth-child.
​
.box:nth-child(3n + 1) {
  color: red;
}
​
.box:nth-child(3n + 2) {
  color: green;
}
​
.box:nth-child(3n + 3) {
  color: blue;
}
​
*/
 
var arr = ["red","green","blue"];
​
$('.box').each(function(i){
  $(this).addClass(arr[ i % arr.length ]);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers