HTMLの構造を明示するJavaScript

javascript programming jquery

これを埋めればHTMLの各要素に色分けされたボーダーが付くという。
最後の方にランダム(?)でborderの色を振るコードが入っているけれど、極めてテキトウ。
16進数ですらないっていう…。
はい、そこ！clazzのあたりの変数の命名に突っ込まない！！
ボーダーが見えさえすれば何でもいいので、雑でもOKということで。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
	var colorIndex = 0;
	$('html *').each(function() {
		var this_ = $(this);
		var id = this_.attr('id');
		var clazz = this_.attr('class');
		var name = [];
		name.push('<span>');
		name.push(this.tagName.toLowerCase());
		var hasId = false;
		if (id && id !== '') {
			name.push('#');
			name.push(id);
			hasId = true;
		}
		if (clazz && clazz !== '') {
			if (hasId) name.push(' ');
			var classes = clazz.split(' ');
			for (var i = 0; i < classes.length; i++) {
				name.push('.');
				name.push(classes[i]);
				name.push(' ');
			}
		}
		name.push('</span>');
		this_.prepend(name.join('')).css({
			border: 'solid 2px #' + ((colorIndex++ * 517) % 1000),
			margin: '15px',
			padding: '5px'
		});
		if (this_.is('ul')) this_.css('list-style', 'none');
	});
});
</script>

2010年08月08日のツイート

2010年08月02日のツイート

2010年08月01日のツイート

2010年07月31日のツイート

2010年07月29日のツイート