Tengo una lista de elementos li con clases que representan su tipo (ordenado o desordenado) y su nivel de lista (2 es una sublista, 3 es una sublista de una sublista, etc.)
Necesito envolverlos en las etiquetas / correctamente, pero aún no he descubierto cómo.
Ejemplo:
<li class="ordered O1"> <li class="ordered O1"> <li class="unordered O2"> <li class="ordered O1">Debiera ser:
<ol> <li class="ordered O1"> <li class="ordered O1"> <ul> <li class="unordered O2"> </ul> <li class="ordered O1"> </ol>Se puede hacer creando algún elemento nuevo y reemplazándolo. Dado que está etiquetado con jQuery, lo usaré ya que lo hace un poco más fácil.
function cleanUpListItems (list, type, level) { // find the first one that is const unItem = $(list).find(`> li.${type}.${level}`).eq(0); // If we have unordered lets move it if (unItem.length) { // figure out where we are moving it const prevLi = unItem.prev("li"); // find all the unordered elements in that group const groupedLis = unItem.nextUntil(`:not(.${level})`).addBack(); // create the nested list and add it const ul = type === "unordered" ? $("<ul></ul>") : $("<ol></ol>"); ul.append(groupedLis); prevLi.append(ul); cleanUpListItems (list, type, level) } } function cleanUpList(list) { // find what tha max ident level is so we know what we need to start with const maxIndent = Math.max(...list.find("> li").map(function (e) { return +this.className.match(/O(\d+)/)[1] } )); // start from the top to the bottom, moving items into the li before it for (var i = maxIndent; i > 1; i--) { cleanUpListItems(list, "ordered", `O${i}`); cleanUpListItems(list, "unordered", `O${i}`); } // check if the list is the correct type, if not swap it if (list.find("li:eq(0)").is(".ordered")) { const newList = $("<ol></ol>"); newList.append(list.children()); list.replaceWith(newList); } } cleanUpList($(".myList")); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="myList"> <li class="ordered O1">1 o</li> <li class="ordered O1">2 o</li> <li class="unordered O2">2.1 u</li> <li class="ordered O1">3 o</li> <li class="ordered O1">4 o</li> <li class="unordered O2">4.1 u</li> <li class="unordered O2">4.2 u</li> <li class="ordered O3">4.2.1 o</li> <li class="ordered O3">4.2.2 o</li> <li class="ordered O3">4.2.3 o</li> <li class="unordered O2">4.3 u</li> <li class="unordered O3">4.3 u</li> <li class="unordered O3">4.3 u</li> <li class="unordered O3">4.3 u</li> <li class="ordered O1">5 o</li> <li class="ordered O2">5.1 o</li> <li class="ordered O2">5.2 o</li> <li class="ordered O3">5.2.1 o</li> <li class="ordered O3">5.2.1 o</li> <li class="ordered O1">6 o</li> </ul>