使用jquery/javascript在n個元素中選擇備用框

我正在從事一個項目並獲取json對象的形式的數據。我在下面所示的框中顯示完美的數據（當前）。但我想添加不同顏色的替代盒子，如下所示（必填）。使用jquery/javascript在n個元素中選擇備用框

Boxes

代碼：

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>

誰能一個可以幫助我我怎麼能做到這一點。由於

來源

2014-09-19 A.K

你可以用靜態json發表小提琴嗎？ – 2014-09-19 05:56:06

無法做那個傢伙。 – 2014-09-19 05:57:05

html？或任何解析數據的網址。 – 2014-09-19 05:59:08

如果您的箱子的順序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>'); 
});

來源

2014-09-19 05:59:22 Huafu

非常感謝您的快速回復。有效。 – 2014-09-19 06:29:32

如果你想或者將類，它應該是

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

希望這樣有助於

來源

2014-09-19 06:04:25 SurajS

這裏是一個工作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; 
}

希望這會有所幫助

來源

2014-09-19 06:32:01 BiJ

使用jquery/javascript在n個元素中選擇備用框

回答

相關問題