Цветные элементы li, основанные на динамически генерируемом тексте и заданном шаблоне c

Question

Я пробовал кое-что в течение нескольких часов, но теперь надеюсь на помощь извне.

У меня есть элементы li с <span> внутри, которые пользователь может переименовать по своему усмотрению. Соглашение об именах всегда одно и то же и разделено подчеркиванием.

1. Имя категории
2. Категория
3. Имя элемента
4. Иногда еще больше идентификатора для 3.

Пример :

Поскольку этот список может стать очень длинным, у меня была идея сделать его более понятным с помощью случайных цветов фона. Здесь возникает проблема.

Как я могу установить цвет для каждого элемента li на основе упомянутого 1-3 синтаксиса? Вот как это должно выглядеть:

Это то, что я получил до сих пор. Очевидно, что просто перебираем каждый li и не можем его классифицировать:

Код:

 var lastPick;
 var rand;
 $('[tree-item-name]').each(function() {
   $(this).css('background',randomColor());
 });

 function randomColor() {
   var back = ["#ffc0cb61","rgba(192,255,210,0.38)","rgba(192,220,255,0.38)","rgba(241,192,255,0.38)","rgba(192,240,255,0.38)","rgba(255,221,192,0.38)","rgba(231,255,192,0.38)"];
   rand = back[Math.floor(Math.random() * back.length)];
   rand==lastPick?randomColor():rand;
   lastPick = rand;
   return rand;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Start</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Start_Go</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Won</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Won_Clear</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Lost</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Lost_Clear</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Quest_AskBet</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Quest_AskBet_Statistics</span>
</li>
<li>
<span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Rules</span>
</li>

TL; DR:

Лог c Я хочу:

1. Проверить все элементы li и его текст (интервала)
2. соответствует группам вместе на основе идентификатора
3. первые три группы, разделенные подчеркиванием, должны иметь одинаковый цвет
4. A_B_C_123 должен иметь одинаковый цвет как A_B_C_321, но у A_B_D_423 должен быть другой цвет и т. д.

Надеюсь, что он ясный и "простой" ?

Answer 1

Вы можете сделать что-то вроде ниже. Сначала получите первые три группы из innerHTML каждого элемента, а затем проверьте, существует ли уже key в объекте items. Если это так, тогда возьмите назначенный цвет, если нет, то получите новый неиспользованный случайный цвет и назначьте его вновь созданному key. Для отслеживания используемых цветов я использовал массив (picked).

Тест и запуск (запустите его несколько раз, чтобы увидеть, как назначаются цвета):

var picked = [];
var rand;
var items = {};

$('[tree-item-name]').each(function() {
  let groups = $(this).html().split("_");    
  if(groups.length >= 3) {
    let item = [groups[0], groups[1], groups[2]].join("_");  
    if(!items[item]) {    // if the key doesn't exist
      items[item] = {     // make a new one
        "color": randomColor()
      };
    }
    $(this).css('background', items[item].color);
  }
});

 function randomColor() {
   var back = ["#ffc0cb61","rgba(192,255,210,0.38)","rgba(192,220,255,0.38)","rgba(241,192,255,0.38)","rgba(192,240,255,0.38)","rgba(255,221,192,0.38)","rgba(231,255,192,0.38)"];
   rand = back[Math.floor(Math.random() * back.length)];
   if(picked.includes(rand)) { // if the color was already chosen before
    rand = randomColor();             // generate a new one
   } else {
    picked.push(rand);         // otherwise add the newly selected color to the tracker array
   }
   return rand;
 }

body {
  background-color: #444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Start</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Start_Go</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Won</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Won_Clear</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Lost</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Cooldown_Lost_Clear</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Quest_AskBet</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Quest_AskBet_Statistics</span>
  </li>
  <li>
  <span class="ect-tree-title" tree-item-name="BJ_Mission_Start">BJ_Mission_Rules</span>
  </li>
 </ul>