Is there a way to automatically generate unique background colors for list elements?
Check out this html snippet that displays list items with different background-colors.
<ul>
<li>
<a href=#">I am the first element</a>
</li>
<li>
<a href=#">I am the 2nd element</a>
</li>
<li>
<a href=#">I am the 3rd element</a>
</li>
</ul>
If you're unable to manually add class or style, using jQuery could be a solution. Here's an example:
$(document).ready(function() {
$('.toc > ul > li').each(function(e){
var n = $(this).children().text().length*222222;
var h = n.toString(16).substr(0,6);
$(this).css({'background-color':'#'+h});
//$(this).append(h);
});
});
The current result may not be visually pleasing, as some colors appear very similar rendering the script ineffective.
Do you have any other innovative techniques for creating visually appealing colorized lists automatically?