-1

I have list of links, and I need to change every first word color or just add html tag with class.

My code is: 

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

For example every word "example" in list need to be red color.

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
pey22
  • 137
  • 2
  • 6
  • 13
  • can't you just edit the html? – PA. Jun 23 '14 at 07:52
  • 1
    Side-note about the "duplicate" vote: While that question is about making the "first" word bold, instead of coloring it, the idea is the same. Changing the applied styles should be a trivial modification. – Cerbrus Jun 23 '14 at 08:01

2 Answers2

2
<!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>
Today
  • 54
  • 5
0

You can use the Css for That. or you can use javascript like this

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");
Hann
  • 727
  • 3
  • 11
  • 22