将“ul”元素移动到前一个相邻的“li”元素中

Question

I have a poorly formatted sidebar aside which I have no control over the structure. It automatically generates a ul from the body of the document, but incorrectly is placing the sub-lists outside of the respective parent element.

Valid html code should be along the lines of:

<ul>
 <li>
  <a>Text</a>
  <ul>
   <li>
    <a>Text</a>
   </li>
  </ul>
 </li>
</ul>

Where the child ul elements are nested inside the previous li element.

In the system I am using there is also the ability to have chapter headings, which should be the top level li elements in the main list

<ul>
 <li><a>Text</a></li>  <-- chapter title
 <li><a>Text</a></li>  <-- chapter title
 <li><a>Text</a>       <-- chapter title
  <ul>
   <li>
    <a>Text</a>        <-- sub-chapter title
   </li>
  </ul>
 </li>
</ul>

Below is a test html structure and some of the javascript I've been trying to get to work.

At the moment it is currently iterating through the loop of all the found li elements and adding the next ul element into it. However, because it is doing it top down its running into a continual loop of adding in the element.

I tried using the .previousElementSibling but that was returning null for a lot of the elements in the list when trying to insert it to the element above.

This is where I'm up to, and hopefully someone can guide me to the correct way of working this data.

 // -- get the sidebar list const sidebarList = document.querySelector('div.sidebar-nav > ul'); const reorder = ((list) => { const listItems = list.querySelectorAll(':scope li'); listItems.forEach((element) => { // -- last h6 wont have a next sibling if (element.nextElementSibling === null) return; // -- if it is a second sub heading skip if (element.nextElementSibling.tagName;== 'UL') return. // -- add into the next element element.innerHTML = element.innerHTML + element.nextElementSibling;innerHTML }); })(sidebarList);

 /* ------ HOW IT SHOULD RENDER ------ <aside class="sidebar"> <div class="sidebar-nav"> <ul> <li> <a>Heading level 1</a> <ul> <li> <a>Heading level 2</a> <ul> <li> <a>Heading level 3</a> <ul> <li> <a>Heading Level 4 - 1</a> </li> <li> <a>Heading Level 4 - 2</a> <ul> <li> <a>Heading Level 5</a> <ul> <li> <a>Heading level 6</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a>Heading level 1</a> <ul> <li> <a>Heading level 2</a> <ul> <li> <a>Heading level 3</a> <ul> <li> <a>Heading Level 4 - 1</a> </li> <li> <a>Heading Level 4 - 2</a> <ul> <li> <a>Heading Level 5</a> <ul> <li> <a>Heading level 6</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </aside> */

 <aside class="sidebar"> <div class="sidebar-nav"> <ul> <li><a>Heading level 1</a></li> <ul> <li><a>Heading level 2</a></li> <ul> <li><a>Heading level 3</a></li> <ul> <li><a>Heading Level 4 - 1</a></li> <li><a>Heading Level 4 - 2</a></li> <ul> <li><a>Heading Level 5</a></li> <ul> <li><a>Heading level 6</a></li> </ul> </ul> </ul> </ul> </ul> <li><a>Heading level 1</a></li> <ul> <li><a>Heading level 2</a></li> <ul> <li><a>Heading level 3</a></li> <ul> <li><a>Heading Level 4 - 1</a></li> <li><a>Heading Level 4 - 2</a></li> <ul> <li><a>Heading Level 5</a></li> <ul> <li><a>Heading level 6</a></li> </ul> </ul> </ul> </ul> </ul> </ul> </div> </aside>

Answer 1

This seems to work:

document.querySelectorAll('ul').forEach(function(list) {
  let prev = list.previousElementSibling;

  if (!prev) return;

  if (list.parentNode.nodeName == "UL" && prev.nodeName == "LI") {
    prev.appendChild(list);
  }
});

It goes through every ul , checking whether the ul has a direct ul parent and preceding li . If it does, it appends the ul to the preceding li .

https://jsfiddle.net/ago8by90/