Как получить содержимое объекта и задать на его основе класс этого объекта?

Question

[lacrim]

Приветствую коллеги, столкнулся с простой задачкой которая завела меня в тупик.

Есть такой код генерируемый CMS

<div class="optns">
   <ul>
      <li>opt01</li>
      <li>opt04</li>
      <li>opt06</li>
      <li>opt07</li>
      <li>opt10</li>
      <li>opt16</li>
      <li>opt17</li>
   </ul>
</div>

Нужно на основе содержимого списка задать классы

Вот так :

<div class="optns">
   <ul>
      <li class="opt01">opt01</li>
      <li  class="opt04">opt04</li>
      <li  class="opt06">opt06</li>
      <li  class="opt07">opt07</li>
      <li  class="opt10">opt10</li>
      <li class="opt16">opt16</li>
      <li class="opt17">opt17</li>
   </ul>
</div>

Я не сильно шарю в jquery и максимум до чего удалось докопаться такой код:

$('.optns li').addClass($(".optns li").text())

Разумеется класс добавился всем одинаковый: class="opt01 opt04 opt06..."

Есть идеи как это элегантно решить? Всем откликнувшимся искренняя благодарность!

Answer 1

[Алексей Уколов]

$('.optns li').each(function() {
    var $el = $(this); // экономим на спичках
    $el.addClass($el.text());
});

jsfiddle.net/koceg/hf41f129

Answer 2

[Виталий Инчин ☢]

[].forEach.call(document.querySelectorAll(".optns li"), function(i){
   i.className = i.textContent;
});