多個文本顏色

Question

有一個在我的列表視圖列表項，我想讓它多有色：

<li class="settings_item" id="lovehate" data-icon="false" style="background: white"> 
    <a href="#" data-transition="flow" data-icon="false" class="settings_item_a">Love | Hate</a> 
</li> 

的默認文本顏色「愛|恨」是黑色的。但是，我想讓「愛」變成紅色，「恨」變成黑色。有沒有辦法做到這一點？

Answer 1

這是一種方法，你可以做到這一點。假設你不介意添加一些額外的標記。

a { 
    color:black; 
    text-decoration:none; 
} 

a .red { 
    color:red; 
} 

<a href=""> <span class="red">Love</span> | Hate </a> 

演示：

http://jsfiddle.net/krishollenbeck/556az/1/

如果文本格式總是相同的，例如text | text和你想要一個更加動態的解決方案，你可以做這樣的事情。

var str  = $('a').text(); 
var textBefore = str.slice(0, str.indexOf("|")); 
var pipe  = "|"; 
var textAfter = str.split("|").pop(); 

$("a").wrapInner(function() { 
    $(this).text(""); 
    return "<span class='red'>" + textBefore + "</span>" + pipe + textAfter; 
}); 

演示：

http://jsfiddle.net/krishollenbeck/556az/6/