Javascript CSS类，取决于列表项文本长度

是否有方法根据值的长度为列表中的项目设置不同的类？最好是简单的JS或jQuery

我有一个固定宽度的列表，每个列表项中的文本量各不相同。列表项有不能重复或扩展的背景，因此我需要为不同的文本长度制作不同的背景（类）

默认css类会处理1-15个字符，15-30个字符需要一个扩展背景的额外类，30-45个字符需要另一个类等等

作为JS中的一个总n00b，我就是想不出这一点，尽管过去两天我一直在摆弄它

提前多谢了

艾瑞克

将此设置为在加载内容后运行，例如

 $(document).ready(function () {
   $('.listItem').each(function(){
     var content = $(this).html();
     if(var.length > 30){
        $(this).addClass('Over30');
     }
   .....etc
 }

将此设置为在加载内容后运行，例如

 $(document).ready(function () {
   $('.listItem').each(function(){
     var content = $(this).html();
     if(var.length > 30){
        $(this).addClass('Over30');
     }
   .....etc
 }

工作示例

---

工作示例。

非常感谢，我欠你一杯啤酒！非常感谢，我欠你一杯啤酒！

$('#myList li').each(function() {
    var length = ($(this).html().length);

    if (length > 30) {
        $(this).addClass('longest');
    }
    else if (length > 15) {
        $(this).addClass('long');
    }
    else {
        $(this).addClass('default');
    }  
});