使用jquery / javascript在n个元素中选择替代框

Question

I am working on a project and getting data in form of json objects. I am displaying data in perfectly in the boxes as depicted below (current). But I want to add class on alternative boxes for different colors as depicted below (required).

Code:

jQuery.each(Stories, function (index) {
    var lindex = 6 * PageID;
    var findex = lindex - 6;

    if (index + 1 > findex && index + 1 <= lindex) {

        var stories = dvStoreies;

        if ((index) % 3 == 0) {
            stories.append("<div class='dvStoriesFirst'  style='clear:left;float:left;margin-bottom:40px;' ID=story_" + index + "></div>"); 
         } 
         else {
             stories.append("<div class='dvStories' style='float:left;margin-bottom:40px;' ID=story_" + index + "></div>");                                             
          }
     }
});

HTML Looks Like This:

<div class="stories">
    <div class="dvStoriesFirst" id="s_box1"></div>
    <div class="dvStories" id="s_box2"></div>
    <div class="dvStories" id="s_box3"></div>
    <div class="dvStoriesFirst" id="s_box4"></div>
    <div class="dvStories" id="s_box5"></div>
    <div class="dvStories" id="s_box6"></div>
</div>

Can anyone one help me how can I achieve this. Thanks

Answer 1

If your boxes are added in this order left to right one row after another , it should be as simple as testing if the box number modulo 3 modulo 2 is 0, ie:

var shouldHighlight = (zeroBasedBoxNumber % 3 % 2) === 0;

So with your code (and with some missing ID and css class):

jQuery.each(Stories, function(index, story) {
  var style = ['float: left', 'margin-bottom: 40px'];
  if (index % 3 === 0) style.push('clear: left');
  if (index % 3 % 2 === 0) style.push('background-color: #aaa');
  dvStoreies.append('<div style="' + style.join(';') + '"></div>');
});

Answer 2

If You want to apply the class Alternatively, it should be

if ((index) % 3 % 2 == 0)

hope so it helps

Answer 3

Here is an working example

<div class="stories">
   <div class="dvStories" id="s_box1"></div>
   <div class="dvStories" id="s_box2"></div>
   <div class="dvStories" id="s_box3"></div>
   <div class="dvStories" id="s_box4"></div>
   <div class="dvStories" id="s_box5"></div>
   <div class="dvStories" id="s_box6"></div>
   <div class="dvStories" id="s_box7"></div>
   <div class="dvStories" id="s_box8"></div>
   <div class="dvStories" id="s_box9"></div></div>

JS Code

$('.dvStories').each(
function(index,div){
    if(index % 3==0){
        $(div).css({clear:"left"});
    }
    if ((index) % 3 % 2 == 0){
        $(div).addClass('orangeBG');
    }
});

CSS

.dvStories{
width:100px;height:100px;
background:grey;
margin:2px;
float:left;
}

.orangeBG{
background:orange;
}

Hope this helps