Задать класс на основе содержимого объекта

Нетривиальная задача: нужно задать CSS-классы элементам на основе их текстового содержимого, чтобы затем через CSS навесить иконки. Причина — устаревшая клиентская CMS, которая могла выводить данные только в таком формате.

Исходная HTML-структура

  

    
opt01
    
opt04
    
opt06
    
opt07
    
opt10
    
opt16
    
opt17
  

Решение на jQuery

Скрипт перебирает каждый элемент списка внутри контейнера .optns и добавляет ему класс, соответствующий тексту элемента:

$('.optns li').each(function() {
  var $el = $(this); // сохранение для производительности
  $el.addClass($el.text());
});

После выполнения скрипта каждый li получит класс, равный своему тексту — например class="opt01". Это позволяет применять иконки через CSS.