Обернуть все li в ul если они дочерние

07 апреля 2021, 21:30

Есть меню сайта

<ul>
  <li>Меню1</li>
  <li>Меню2</li>
  <li>Меню3
    <li>ДочМеню3</li>
    <li>ДочМеню3</li>
    <li>ДочМеню3</li>
  </li>     
</ul>

Если в Меню3 будут еще дочерние элементы, то их обернуть в <ul class="sub"></ul>

 <ul>
  <li>Меню1</li>
  <li>Меню2</li>
  <li>Меню3
    <ul class="sub">
     <li>ДочМеню3</li>
     <li>ДочМеню3</li>
     <li>ДочМеню3</li>
    <ul>
  </li>    
</ul>

Как правильно написать на js? Спасибо!

Answer 1

Проблема в том, что браузер как только натыкается на новый открытый <li>, когда предыдущий еще не закрыт - автоматически закрывает его, потом только идет дальше. Поэтому изначально не может быть такой ситуации, чтобы li были внутри других... поэтому можно заранее записать их в виде div, а подменить на li только после добавления ul.

var ul = document.getElementById('ul'); 
 
var li = ul.querySelectorAll('li'); 
 
for( var i = 0; i < li.length; i++ ){ 
  var div = li[i].querySelector('div'); 
  if( div ){ //Если внутри очередного li есть div... 
 
    var x = li[i];  
    // здесь методы вставки HTML не прокатят, потому что браузер автоматически 
    // дописывает теги и мешает. Поэтому только регулярки. 
     
    x.outerHTML = x.outerHTML.replace(/<div>/, '<ul class="sub"><div>') 
                             .replace(/<\/li>/, '</ul></li>') 
                             .replace(/(<|<\/)div>/g,"$1li>");  
    // $1 указывает на то, что в скобках, внутри выражения 
     
  } 
}

<ul id="ul"> 
  <li>Меню1</li> 
  <li>Меню2</li> 
  <li>Меню3 
    <div>ДочМеню3</div> 
    <div>ДочМеню3</div> 
    <div>ДочМеню3</div> 
  </li>   
</ul>

P.s. и я всё равно не представил, где в реальной жизни можно наткнуться на такую задачу.