Блог

Есть ли способ задать разные классы элементам в списке в зависимости от длины значения? Предпочтительнее обычный JS или jQuery.

У меня есть список с фиксированной шириной, и количество текста в каждом элементе списка варьируется. Элементы списка имеют фоны, которые нельзя повторить или расширить, и из-за этого мне нужно было бы создать разные фоны (классы) для разной длины текста.

Класс css по умолчанию обработает 1-15 символов, для 15-30 символов потребуется дополнительный класс с расширенным фоном, а для 30-45 символов потребуется другой класс и т.д.

Будучи полным n00b в JS, я просто не могу разобраться в этом, хотя я возился с этим последние два дня…

Заранее большое спасибо,

Эйрик.

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

Вот рабочий пример.

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