Intento permitir que el usuario cree su propia lista con vista de árbol, pero cuando selecciono ul:last-child , no funciona correctamente si no uso ul:last-child todavía no funciona correctamente. Aquí está mi fragmento de código
Funciones JS;
<script type="text/javascript"> function addData(){ let text = ""; Swal.fire({ title: 'Add Element', input: 'text', inputAttributes: { autocapitalize: 'off' }, showCancelButton: true, confirmButtonText: 'Add', showLoaderOnConfirm: true, cancelButtonText: "Cancel", allowOutsideClick: () => !Swal.isLoading() }).then((text) => { $("#treeview ul").append("<li>"+text.value+"</li>"); }) } function goSubTitle(){ $("#treeview ul li").append("<li><ul>"); } function goTitle(){ $("#treeview ul li").append("</ul></li>"); } </script> aquí capturas de pantalla; sin ul:last-child con ul:last-child
Aquí está lleno de códigos HTML
<table border style="width: 100%;"> <tr> <td style="width: 30%;">Your List</td> <td style="width: 70%;"> <div class="row"> <div class="col-md-8" id="treeview"> <ul> </ul> </div> <div class="col-md-1"> <button class="btn btn-success" onclick="goTitle()"><</button> </div> <div class="col-md-2"> <button class="btn btn-success" onclick="addData()">Insert Data</button> </div> <div class="col-md-1"> <button class="btn btn-success" onclick="goSubTitle()">></button> </div> </div> </td> </tr> </table>Lo resolví con estos cambios.
<script type="text/javascript"> let code = ""; let index= 0; function addData(){ let text = ""; Swal.fire({ title: 'Enter your value', input: 'text', inputAttributes: { autocapitalize: 'off' }, showCancelButton: true, confirmButtonText: 'Add', showLoaderOnConfirm: true, cancelButtonText: "Cancel", allowOutsideClick: () => !Swal.isLoading(), preConfirm: (text) => { code = parseInt($("#treeview li").length); $("#treeview ol."+index+":last").append("<li>" + text + "</li>"); } }) } function goSubTitle() { index += 1; $("#treeview li:last").append("<ol class="+index+"></ol>"); } function goTitle() { index -=1; if(index == 0) { index = 0; } } </script> El índice comenzó con el valor "0" y el primer ol parece <ol class="0"></ol> .
La razón del problema, cuando trato de agregar <ul> o <li> , jQuery cierra automáticamente la etiqueta html.