如何具有特定數據屬性

Question

我要讓li元素交替的顏色，但只有那些具有屬性替代顏色申請，但只有那些元素data-filetype="image".

只要我添加了一個新的li無需添加data-filetype attribute，我的顏色序列失敗。

鏈接JSBin是here

HTML代碼：

<ul> 
<li data-filetype="image">PNG Image</li><!-- It should be RED --> 
<li data-filetype="image">PNG Image</li><!-- It should be ORANGE --> 
<li>Normal Link</li><!-- After adding this li color sequence breaks --> 
<li data-filetype="image">PNG Image</li><!-- It should be RED --> 
<li data-filetype="image">PNG Image</li><!-- It should be ORANGE --> 
</ul> 

CSS：

ul li[data-filetype="image"]:nth-child(2n){color:orange} 
ul li[data-filetype="image"]:nth-child(2n+1){color:red} 

Answer 1

使用jQuery你可以得到即使額外的元素添加備用行顏色。看看DEMO。

/jQuery代碼/

$(document).ready(function(){ 

$("li[data-filetype='image']:even").css({'color':'red'}); 
$("li[data-filetype='image']:odd").css({'color':'blue'}); 
$("li:not([data-filetype='image'])").css({'color':'white'}); 
});