JSFiddle - React, Tailwind, and code Playground

by Farzad Cyrus

HTML

<ul id="nav">
    <li class="number_1"></li>
    <li class="number_2"></li>
    <li class="number_3"></li>
    <li class="number_4"></li>
    <li class="number_5"></li>
</ul>

JavaScript

$('li').each(function(index, element)
{
    //var newClass = numberToName($(this).attr('class'));
    //$(this).removeClass($(this).attr('class')).addClass(newClass);
  
  $(element).html(numberToName(index));

})

function numberToName(number)
{
    //number = number.replace('number_', '');

    switch(number)
    {
    case '1':
      number = 'one';
      break;
    case '2':
      number = 'two';
      break;
    case '3':
      number = 'three';
      break;       
    case '4':
      number = 'four';
      break;      
    case '5':
      number = 'five';
      break;
    }
   
   return number;
}