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>

＆＃34; Love |的默认文字颜色恨＆＃34;是黑色的。但是我想做爱＃34;变红了＆＃34;讨厌＆＃34;变成黑色有办法吗？

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/

jQuery移动列表视图文本中的多种文本颜色

1 个答案: