kobakei/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Rainbow</title>
    <!-- jQuery -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1");
    </script>
    <!-- rainbow.js -->
    <script type="text/javascript" src="/javascripts/rainbow.js"></script>
  </head>
  <body>
    <h1 class="rainbow">ここに書いた文字が虹色に表示されます。</h1>
    <p class="rainbow">ここに書いた文字が虹色に表示されます。</p>
  </body>
</html>

## rainbow.js
/**
 * rainbow.js
 * Copyright Keisuke Kobayashi 2012
 */
$(document).ready(function(){
  var COLORS = [
    'red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'
  ];
  var doms = $('.rainbow');
  doms.each(function (index) {
    var text = $(this).text();
    var html = "";
    for (var i = 0; i < text.length; i++) {
      html += "<span style='color: " + COLORS[i % COLORS.length] + "'>" + text[i] + "</span>";
    }
    $(this).html(html);
  });
});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Rainbow</title>
	<!-- jQuery -->
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("jquery", "1");
	</script>
	<!-- rainbow.js -->
	<script type="text/javascript" src="/javascripts/rainbow.js"></script>
	</head>
	<body>
	<h1 class="rainbow">ここに書いた文字が虹色に表示されます。</h1>
	<p class="rainbow">ここに書いた文字が虹色に表示されます。</p>
	</body>
	</html>
	/**
	* rainbow.js
	* Copyright Keisuke Kobayashi 2012
	*/
	$(document).ready(function(){
	var COLORS = [
	'red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'
	];
	var doms = $('.rainbow');
	doms.each(function (index) {
	var text = $(this).text();
	var html = "";
	for (var i = 0; i < text.length; i++) {
	html += "<span style='color: " + COLORS[i % COLORS.length] + "'>" + text[i] + "</span>";
	}
	$(this).html(html);
	});
	});