Question

有没有办法根据值的长度为列表中的项设置不同的类？更简单的JS或jQuery。

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

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

作为JS中的总n00b，我无法理解这一点，即使我在过去两天一直在摆弄它......

提前多多感谢，

的Eirik。

Answer 1

$('#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。

Answer 2

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

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

2 个答案: