css - jQuery 移动 ListView 文本中的多种文本颜色

Question

我的 ListView 中有一个列表项，我想将其设置为多种颜色:

<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/