如何找到元件使用jQuery

Question

這裏特定的顏色是我的HTML代碼

<ul id="components"> 
    <li>Computer</li> 
    <li>Mouse</li> 
    <li>Keyboard</li> 
    <li>Printer</li> 
    <li>CPU</li> 
</ul> 

#components li:first-child{ 
    color:red; 
} 
#components li: nth-child(2){ 
    color:blue; 
} 
#components li: nth-child(3){ 
    color:red; 
} 
#components li: nth-child(4){ 
    color:red; 
} 
#components li: nth-child(5){ 
    color:green; 
} 

我需要的是一個jQuery的功能，可以找到所有在red顏色li元素可以將背景轉換爲黃

我的意思是這樣

​​

Answer 1

您可以使用.filter();

$('ul li').filter(function() { 
 
    return $(this).css('color') == 'rgb(255, 0, 0)'; 
 
}).each(function() { 
 
    $(this).css('background-color', 'yellow'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<ul id="components"> 
 
    <li style="color:red">Computer</li> 
 
    <li style="color:blue">Mouse</li> 
 
    <li style="color:red">Keyboard</li> 
 
    <li style="color:red">Printer</li> 
 
    <li style="color:green">CPU</li> 
 
</ul>

Answer 2

你可以使用屬性選擇[attr=value]DEMO

$('ul li[style="color:red"]').css('background', 'yellow'); 

你也可以這樣做純CSS

ul#components li[style="color:red"] { 
 
    background: yellow; 
 
}

<ul id="components"> 
 
    <li style="color:red">Computer</li> 
 
    <li style="color:blue">Mouse</li> 
 
    <li style="color:red">Keyboard</li> 
 
    <li style="color:red">Printer</li> 
 
    <li style="color:green">CPU</li> 
 
</ul>

更新：這是不是這樣做的最佳方式，但你可以檢查每個L1顏色和返回rbg並添加背景DEMO

$('ul li').each(function() { 
    var color = $(this).css('color'); 
    if (color == 'rgb(255, 0, 0)') $(this).css('background', 'yellow'); 
}) 

Answer 3

嘗試，

$('li[style="color:red"]').css('background-color','yellow') 

或者

$('li[style="color:red"]').attr('style','color:red;background-color:yellow;') 

或者使用每個（）循環

var allLi=$('li') 
$.each(allLi,function(k,v){ 
if($(v).attr('style')=='color:red') 
{ 
$(v).css('background-color','yellow') 
} 
}) 

工作JSFiddle

Answer 4

您可以使用.filter()濾波元件的選擇。用filter()函數中的style.color屬性獲取元素的顏色。

$("#components > li").filter(function(){ 
 
    return this.style.color == "red"; 
 
}).css("background-color", "yellow");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="components"> 
 
    <li style="color:red">Computer</li> 
 
    <li style="color:blue">Mouse</li> 
 
    <li style="color:red">Keyboard</li> 
 
    <li style="color:red">Printer</li> 
 
    <li style="color:green">CPU</li> 
 
</ul>