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

标签 javascript html css colors

<分区>

我有链接列表,我需要更改每个第一个单词的颜色或只添加带有类的 html 标签。

我的代码是:

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

例如,列表中的每个单词“example”都需要是红色。

最佳答案

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

关于javascript - 仅使用 javascript 更改 li 中每个第一个单词的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24360883/

上一篇:jquery - 简单的 jquery 自动完成输入框不起作用

下一篇:javascript - 如何使我的推送菜单更加人性化?

相关文章:

javascript - Angular UI Grid 在导航时将焦点设置为单元格

javascript - 使用 jquery 拖放

javascript - 如何使 slider 图像变暗?

html - 如何使 webkit 滚动条可见

css - 悬停后如何在鼠标移开时反转动画

javascript - 如何使用 api (captions.download

html - 如何使表格的宽度固定

javascript - 拖动 anchor 元素时停止 anchor href 导航?

jquery - CSS/HTML 弹出窗口不会关闭

javascript - 在 JavaScript 中设置嵌套对象属性