Пронумеровать список

323

30 сентября 2017, 22:10

Есть список и нужно его пронумеровать. Под пронумеровать подразумевается добавление классов: во 2 уровне ul, например, сlass_2, в 3 уровне ul - сlass_3. Должно получится что-то типа такого.

Предполагаю, решение кроется в jQuery, но точно не знаю как сделать.

<ul  class="class_1">
   <li>
      <ul class="class_2">
         <li></li>
         <li>
            <ul class="class_3">
               <li></li>
               <li></li>
               <li></li>
               <li></li>
            </ul>
         </li>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </li>
   <li>
      <ul class="class_2">
         <li></li>
         <li>
            <ul class="class_3">
               <li></li>
               <li></li>
               <li></li>
               <li></li>
            </ul>
         </li>
         <li>
            <ul class="class_3">
               <li></li>
               <li></li>
               <li></li>
               <li></li>
            </ul>
         </li>
         <li>
            <ul class="class_3">
               <li></li>
               <li></li>
            </ul>
         </li>
         <li></li>
      </ul>
   </li>
   <li></li>
</ul>

Answer 1

Например, так

function setClass(AList) { 
  var level = AList.data('level'); 
  if (level) 
    return level; 
  var parent = $(AList.parent().closest('ul')); 
  if (parent.length) 
    var level = setClass(parent) + 1; 
  else 
    var level = 1; 
  AList.addClass('class_' + level).data({level: level}); 
  return level; 
} 
 
$('ul:not(:has(ul))').each(function() { 
  setClass($(this)); 
});

.class_1 { 
  background-color: red; 
} 
 
.class_2 { 
  background-color: green; 
} 
 
.class_3 { 
  background-color: blue; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
   <li> 
      <ul> 
         <li></li> 
         <li> 
            <ul> 
               <li></li> 
               <li></li> 
               <li></li> 
               <li></li> 
            </ul> 
         </li> 
         <li></li> 
         <li></li> 
         <li></li> 
      </ul> 
   </li> 
   <li> 
      <ul> 
         <li></li> 
         <li> 
            <ul> 
               <li></li> 
               <li></li> 
               <li></li> 
               <li></li> 
            </ul> 
         </li> 
         <li> 
            <ul> 
               <li></li> 
               <li></li> 
               <li></li> 
               <li></li> 
            </ul> 
         </li> 
         <li> 
            <ul> 
               <li></li> 
               <li></li> 
            </ul> 
         </li> 
         <li></li> 
      </ul> 
   </li> 
   <li></li> 
</ul>

Идея:

вначале выбираем все списки, которые не имеют дочерних списков $('ul:not(:has(ul))').
Затем для каждого из этих списков рекурсивно ищем родительский, чтобы узнать на каком уровне мы находимся
все вычисленные уровни сохраняем, чтобы не вычислять для одного и того же элемента дважды

Answer 2

Достаточно просто пробежаться по всем первым потомкам каждого ul-a, предварительно установив класс для первого ul-a.

https://jsfiddle.net/lermon333/ep9wh2v9/

var index = 1;
var first = $('ul').first();
first.addClass(index + "_class");
index += 1;
setClass(first, index);
function setClass(parent, index) {
  firstUlChilds = parent.find(">li>ul");
  firstUlChilds.addClass(index + "_class");
  index += 1;
  if (firstUlChilds.length) {
    firstUlChilds.each(function(i, el){
      setClass($(el), index);
    })
  }
}