備選div背景顏色

我有一系列的div在兩列中用一些javascript來規定一些行爲，我想讓某些div類的背景顏色交替出現。備選div背景顏色

下面是應該處理這個JavaScript的：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#faqlist div.faq-title:nth-child(odd)').addClass('alternate'); 
    }); 
</script>

隨着樣式表調用備用的div背景色：

div.alternate { background: #c1c1c1 }

而這裏的HTML：

<div id="faqlist"> 
<div class="faq-title"></div> 
<div class="faq-answer"></div> 
<div class="faq-title"></div> 
<div class="faq-answer"></div> 
<div class="faq-title"></div> 
<div class="faq-answer"></div> 
</div>

權現在，結果是類的每個div「faq-title」具有＃c1c1c1背景色，leadin我相信我錯過了簡單的事情。就像javascript建議的那樣，我只想交替使用「faq-title」類div來獲得＃c1c1c1背景色，而「faq-answer」div被忽略。

的jsfiddle：http://jsfiddle.net/inerdial/mRaRW/

來源

2012-02-06 blackessej

這是jQuery嗎？如果是這樣的話，你應該這樣標記問題。 – millimoose 2012-02-06 23:21:16

我猜問題是你的選擇器的意思是「一個具有類'.faq-title' *的div，而*是它的父類的一個奇數孩子」 – millimoose 2012-02-06 23:23:27

正如你已經發現，nth-child需要它的編號從父元素，而不是特定的選擇的結果（見jquery documentation）。

使用:even，這你想要做什麼：

$('#faqlist div.faq-title:even') 
    .addClass('alternate');

http://jsfiddle.net/uJqPg/

注意:even是從0開始的，而nth-child（以下CSS規範），以1爲基礎，因此，即使/奇怪的不匹配。另外，:even是一個jQuery擴展，在任何瀏覽器上都不會是原生的。

來源

2012-02-06 23:24:42

很好。這正是我所尋找的解決方案。謝謝@加貝。 – blackessej 2012-02-06 23:41:47

備選div背景顏色

回答

相關問題