取決於列表項的CSS類文本長度

Question

是否有方法根據值的長度將不同的類設置爲列表中的項目？最好是普通的JS或jQuery。

我有一個固定寬度的列表，並且每個列表項中的文本數量都不相同。列表項目具有不能重複或延伸的背景，因此我需要爲不同的文本長度創建不同的背景（類別）。

1-15個字符會由默認的CSS類被照顧，15-30個字符就需要一個額外的類與擴展的背景和30-45個字符就需要另一個類等

作爲一個總在的n00b JS我不能設法弄清楚了這一點，儘管我一直在擺弄它在過去兩天...

非常感謝提前，

的Eirik。

Answer 1

$('.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 
} 

Answer 2

$('#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'); 
    } 
}); 

工作實例here。