使用jquery / javascript选择n个元素中的备用框

Question

我正在处理一个项目，并以json个对象的形式获取数据。我正在框中完美地显示数据，如下所示（当前）。但我想在不同颜色的替代方框上添加课程，如下所示（必填）。

代码：

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看起来像这样：

<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>

任何人都可以帮助我如何实现这一目标。感谢

Answer 1

如果你的方框是按照left to right one row after another的顺序添加的，那么它应该像测试模数3模2的模数是否为0一样简单，即：

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

所以使用你的代码（以及一些缺少的ID和css类）：

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 ((index) % 3 % 2 == 0)

希望如此有帮助

Answer 3

这是一个有效的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代码

$('.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;
}

希望这有帮助