我想改變一些divs背景顏色。現在我知道如何改變元素背景的顏色。如何使用下一個模式更改JavaScript循環中的背景：一行藍色，兩行紅色，一行藍色，兩行紅色，等等？如何更改循環中的行顏色？

我的代碼：

var count = 0; 
 
$('#content .row').each(function() { 
 
    if(count%2 == 0){ 
 
     $(this).css('background', '#F00');  
 
    }else{ 
 
     $(this).css('background', '#3875D9');    
 
    } 
 
    count++; 
 
});

.row{ 
 
    display: inline-block; 
 
    width: 100%; 
 
    color: #fff; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='content'> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
</div>

UPDATE：

的答案後，我看到了，我甚至沒有知道我是想實現的，所以我我會在這裏發佈圖片。問題幾乎是一樣的。我會讓圖像解釋什麼，我試圖做的：

來源

2016-09-23 Ionut

只有通過針對所有元素是紅色的，然後針對第三個是藍色的CSS，你可以達到同樣的效果：例如：.row {背景：紅色;} .row ：第n個孩子（3n）{背景：藍色}; 。Css的加載速度比JS快得多，所以如果你能做到這一點，你應該儘可能地優化頁面。 –

這個問題很好，很有用。不要改變這個問題併發布新的問題。 – Mohammad

只需使用% 3代替% 2，並調整相應的條件：

編輯

的問題進行修改後，我試圖找到一個解決方案，發現這一點，這是一個黑客的位：

使行width: 50%; float: left，以適應其中的兩個在一行
修改一點施加顏色的

$('#content .row').each(function (index) { 
 
    if(index % 4 == 0 || index % 4 == 3){ 
 
     $(this).css('background', '#3875D9');  
 
    }else{ 
 
     $(this).css('background', '#F00');    
 
    } 
 
});

.row{ 
 
    display: inline-block; 
 
    width: 50%; 
 
float:left; 
 
    color: #fff; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='content'> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
</div>

來源

2016-09-23 14:15:10 GolfWolf

你不需要定義索引變量。使用'.each（）'索引參數。 – Mohammad

@穆罕默德你是對的;這簡化了一些事情。我修改了我的答案。 – GolfWolf

然後我想我的代碼中可能會有更大的問題，我的意思是這個問題有效。而在我的其他代碼不。我在問題中添加了一個簡化的代碼。 – Ionut

可以通過3代替2.您有1個藍色檢查模量的邏輯如果你需要不同的圖案，那麼你可以相應地改變數字。

所以，如果塊將如下

if(count%3 == 0){ 
    $(this).css('background', '#3875D9'); 
}else{ 
    $(this).css('background', '#F00'); 
}

來源

2016-09-23 14:22:03 iiR

你可以不用JavaScript代碼。只使用CSS :nth-child選擇喜歡例如：

.row{ 
 
    display: inline-block; 
 
    width: 100%; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
.row:nth-child(3n+1) { 
 
    background: #3875D9; 
 
} 
 

 
.row:nth-child(3n+2), 
 
.row:nth-child(3n+3){ 
 
    background: #F00; 
 
}

<div id='content'> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
    <div class='row'>row</div> 
 
</div>

來源

2016-09-23 14:30:21 Mohammad

請檢查我更新的問題。答案之後，我意識到我在問錯誤的問題。 – Ionut

你可以寫一個jQuery插件爲！

只爲類索引和相應的類名提供模式。目前這隻適用於兩個班級。

只需修改圖案參數（第一個）即可更改行顏色顯示。

// jQuery Plugin 
 
(function($) { 
 
    $.fn.colorRows = function(pattern, classes) { 
 
    this.each(function(index, row) { 
 
     var clsIndex = parseInt(pattern.charAt(index % pattern.length), 10); 
 
     $(this).addClass(classes[clsIndex]); 
 
     $(this).removeClass(classes[1 - clsIndex]); 
 
    }); 
 
    }; 
 
})(jQuery); 
 

 
$('#content .row').colorRows('1001100', ['row-red', 'row-blue']);

.row { 
 
    display: inline-block; 
 
    width: 100%; 
 
    color: #FFF; 
 
    text-align: center; 
 
} 
 

 
.row-blue { background: #3875D9; } 
 
.row-red { background: #FF0000; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
    <div class="row">row</div> 
 
</div>

來源

2016-09-23 15:02:04

如何更改循環中的行顏色？

回答

編輯

相關問題