Question

我有链接列表，我需要更改每个第一个单词的颜色，或者只是在课堂上添加html标签。

我的代码是：

<ul>
    <li><a href="#">example one</a></li>
    <li><a href="#">example two</a></li>
    <li><a href="#">example tree</a></li>
</ul>

例如每个单词＆＃34;示例＆＃34;在列表中需要是红色。

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style>
        .firstWord{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
    <li><a href="">Hello world</a></li>
    <li><a href="">Hello world</a></li>
    <li><a href="">Hello world</a></li>
    <li><a href="">Hello world</a></li>
    </ul>
</body>

<script>
    $('li a').each(function(){

    var text = $(this).text().split(' ');
    if(text.length < 2)
        return;

    text[0] = '<span class="firstWord">'+text[0]+'</span>';

    $(this).html( text.join(' ') );

});
</script>
</html>

Answer 2

你可以使用Css for That。或者你可以使用这样的javascript

Html：

<ul list style type = "none">
  <li id = "l0">this is line one</li>
  <li id = "l1">this is line two</li>
  <li id = "l2">this is line three</li>
</ul>

javascript：

function highlight(name,color) {
  var a = document.getElementById(name);
  a.style.color = color;
}

highlight("l0", "red");
highlight("l2", "blue");

仅使用javascript更改li中的每个第一个单词颜色

2 个答案: