html - Change every first word color in li with javascript only -
this question has reply here:
css increment size of first word 9 answersi have list of links, , need alter every first word color or add together html tag 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 illustration every word "example" in list need reddish color.
<!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 html css colors
No comments:
Post a Comment