tengo éste
<ul id="reportsTree" class="tree"> <li class="reportGroupItem">Coffee</li> <li class="reportGroupItem">Tea <li class="reportItem">Black tea</li> <li class="reportItem">Green tea</li> </li> <li class="reportGroupItem">Milk</li> </ul>Pero necesito este
<ul id="reportsTree" class="tree"> <li class="reportGroupItem">Coffee</li> <li class="reportGroupItem">Tea <ul> <li class="reportItem">Black tea</li> <li class="reportItem">Green tea</li> </ul> </li> <li class="reportGroupItem">Milk</li> </ul>Mire que los dos elementos <li_> con la clase "reportItem" están envueltos por un elemento... pero no puedo simplemente envolver los elementos "reportItem" porque puede haber más de uno (como el ejemplo) y no puedo simplemente insertar el elemento después de un "reportGroupItem" porque tal vez no haya niños dentro... Entonces, ¿qué puedo hacer?
Lo he intentado con .wrapInner(), .wrapAll, buscando el primer hijo...
Muy fácil, pero muy frustrante para mí :(
El código mal formado se genera así:
<logic:iterate name="ReportGenerationForm" property="reportGroups" id="group"> <li class="reportGroupItem"> <bean:write name="group" property="code" /> <logic:iterate name="group" property="reports" id="report" indexId="index"> <li class="reportItem"> <bean:write name="report" property="code" /> </li> </logic:iterate> </li> </logic:iterate>Replanteando la pregunta basada en el comentario de los OP "este fue mi primer intento" , cambiando la fuente a la salida como:
<logic:iterate name="group" property="reports" id="report" indexId="index"> <ul> <li class="reportItem"> <bean:write name="report" property="code" /> </li> </ul> </logic:iterate>que saldrá como:
<ul id="reportsTree" class="tree"> <li class="reportGroupItem">Coffee</li> <li class="reportGroupItem">Tea <ul> <li class="reportItem">Black tea</li> </ul> <ul> <li class="reportItem">Green tea</li> </ul> </li> <li class="reportGroupItem">Milk</li> </ul> Entonces podemos, basándonos en esta respuesta , combinar los li s dentro de los ul internos usando:
$("ul > li > ul + ul").each((i, e) => { $(e).children('li').appendTo($(e).prev()); $(e).remove(); }) podría usar ids/clases en su lugar, por ejemplo, ul#reportsTree > li.reportGroupItem > ul + ul
que dice: encuentre todas las listas que siguen a otra lista dentro de un elemento de lista dentro de una lista. La parte clave es ul + ul . Similar sería ul>li>ul:not(:first)
Luego mueve todos los elementos de la lista de niños a la ul anterior (no es necesario .prev("ul") o similar, ya que ul+ul ya confirma que la anterior es una ul)
Fragmento actualizado a continuación. Aquí, he dado cada ul y subrayado/separador para que pueda verlos combinados visiblemente al hacer clic en el botón. O puede inspeccionar el elemento para ver el efecto (y que no quede ningún ul "huérfano" (sin hijos))
$("button").on("click", () => { $("ul>li>ul+ul").each((i, e) => { //console.log($(e).text()) $(e).children('li').appendTo($(e).prev()); $(e).remove(); }) }); ul { border-bottom: 1px solid #CCC } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="reportsTree" class="tree"> <li class="reportGroupItem">Coffee</li> <li class="reportGroupItem">Tea <ul> <li class="reportItem">Black tea</li> </ul> <ul> <li class="reportItem">Green tea</li> </ul> </li> <li class="reportGroupItem">Milk</li> </ul> <button> click me </button>