Cuando creo un acordeón, en su interior se puede crear otros acordeones (como si fueran acordeones hijos), lo que yo quiero obtener es la cantidad de acordeones hijos que tiene cada padre, NO OBTENER TODO JUNTO.
He estado intentando con este código, pero no tuve éxito
$(".btn-guardar").on("click", function(){
let nivel = new Array();
let subnivel = new Array();
let preguntas = new Array();
$(".panel-ficha .parrafo_editable").each(function(){
nivel.push($(this));
});
$(".panel-aspecto-descripcion .parrafo_editable").each(function(){
subnivel.push($(this));
});
$(".pregunta-preguntaInicial").each(function(){
preguntas.push($(this));
});
for(let niv of nivel){
console.log(niv.text());
}
console.log("=====================================================");
for(let subni of subnivel){
console.log(subni.text());
}
console.log("=====================================================");
for(let pre of preguntas){
console.log(pre.text());
}
});
Aquí esta mi proyecto completo
$(document).ready(function() {
$(".contenedor-panel").on("click", ".panel-ficha", function() {
var t = $(this);
var tp = t.next();
var p = t
.parent()
.siblings()
.find(".panel-aspecto");
tp.slideToggle();
p.slideUp();
});
$(".contenedor-panel").on("click", ".panel-aspecto-descripcion", function() {
var t = $(this);
var tp = t.next();
var p = t
.parent()
.siblings()
.find(".panel-aspecto-descripcion-indicadores");
tp.slideToggle();
p.slideUp();
});
$(".editar").on("click", function(e) {
e.stopPropagation();
});
let panelAspectoDescripcionIndicadores =
'<div class="contenedorTotalPreguntas">' +
'<div class="puntaje">' +
'<div class="puntaje-hijo puntaje-descripcion">PUNTAJE</div>' +
'<div class="puntaje-hijo puntaje-puntuacion">1</div>' +
'<div class="puntaje-hijo puntaje-puntuacion">2</div>' +
'<div class="puntaje-hijo puntaje-puntuacion">3</div>' +
'<div class="puntaje-hijo puntaje-puntuacion">4</div>' +
"</div>" +
'<div class="observacion">' +
'<div class="observacion-hijo observacion-descripcionInicial">OBSERVACIONES</div>' +
'<div class="observacion-hijo observacion-puntuacion">IMPORTANCIA</div>' +
'<div class="observacion-hijo observacion-puntuacion observacion-malo">MALO</div>' +
'<div class="observacion-hijo observacion-puntuacion observacion-regular">REGULAR</div>' +
'<div class="observacion-hijo observacion-puntuacion observacion-bueno">BUENO</div>' +
'<div class="observacion-hijo observacion-puntuacion observacion-muyBueno">MUY BUENO</div>' +
'<div class="observacion-hijo observacion-descripcionFinal">OBSERVACIONES</div>' +
'<div class="observacion-hijo observacion-i">i</div>' +
'<div class="observacion-hijo observacion-acciones">ACCIONES</div>' +
"</div>" +
'<div class="pregunta">' +
'<form class="pregunta-contenedor">' +
'<div class="pregunta-hijo pregunta-preguntaInicial" contentEditable="true">AQUI PUEDE COLOCAR SU PREGUNTA</div>' +
'<div class="pregunta-hijo pregunta-comboBox">' +
'<select class="comboBox" disabled>' +
'<option value="Vacio" selected>--Seleccione--</option>' +
'<option value="Alta">Alta</option>' +
'<option value="Media">Media</option>' +
'<option value="Baja">Baja</option>' +
"</select>" +
"</div>" +
'<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
'<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
'<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
'<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
'<div class="pregunta-hijo pregunta-text"><input class="text" type="text" disabled></div>' +
'<div class="pregunta-hijo pregunta-subirArchivo"><input class="subirArchivo" type="submit" value="i" disabled></div>' +
'<div class="pregunta-hijo pregunta-iconos">' +
'<img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editarPregunta" alt="Editar" title="Editar">' +
'<img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminarPregunta" alt="Eliminar" title="Eliminar">' +
"</div>" +
"</form>" +
"</div>" +
'<input class="btn-pregunta" type="submit" value="AGREGAR UNA PREGUNTA">' +
"</div>";
$(".btn-crearElemento").on("click", function() {
$(".panel-aspecto-descripcion-indicadores").html(
panelAspectoDescripcionIndicadores
);
});
$(document).on("click", ".btn-categoria", function() {
let actual = $(this);
let btn_categoria_actual = actual.prev();
$(btn_categoria_actual).html(panelAspectoDescripcionIndicadores);
});
$(document).on("click", ".btn-pregunta", function() {
let actual = $(this);
actual
.prev()
.append(
'<form class="pregunta-contenedor">' +
'<div class="pregunta-hijo pregunta-preguntaInicial" contentEditable="true">AQUI PUEDE COLOCAR SU PREGUNTA</div>' +
'<div class="pregunta-hijo pregunta-comboBox">' +
'<select class="comboBox" disabled>' +
'<option value="Vacio" selected>--Seleccione--</option>' +
'<option value="Alta">Alta</option>' +
'<option value="Media">Media</option>' +
'<option value="Baja">Baja</option>' +
"</select>" +
"</div>" +
'<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
'<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
'<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
'<div class="pregunta-hijo pregunta-radioButton"><input class="radioButton" type="radio" name="rButton" disabled></div>' +
'<div class="pregunta-hijo pregunta-text"><input class="text" type="text" disabled></div>' +
'<div class="pregunta-hijo pregunta-subirArchivo"><input class="subirArchivo" type="submit" value="i" disabled></div>' +
'<div class="pregunta-hijo pregunta-iconos">' +
'<img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editarPregunta" alt="Editar" title="Editar">' +
'<img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminarPregunta" alt="Eliminar" title="Eliminar">' +
"</div>" +
"</form>"
);
});
$(document).on("click", ".editarPregunta", function() {
$(this)
.parents(".pregunta-contenedor")
.children(".pregunta-preguntaInicial")
.attr("contentEditable", "true")
.focus();
});
$(document).on("click", ".eliminarPregunta", function() {
let actual = $(this)
.parent()
.parent();
actual.remove();
});
$(document).on("paste", ".pregunta-preguntaInicial", function(e) {
e.preventDefault();
let datos = event.clipboardData.getData("text/PLAIN");
document.execCommand("insertText", true, datos);
});
$(document).on("paste", ".panel-ficha", function(e) {
e.preventDefault();
let datos = event.clipboardData.getData("text/PLAIN");
document.execCommand("insertText", true, datos);
});
$(document).on("paste", ".panel-aspecto-descripcion", function(e) {
e.preventDefault();
let datos = event.clipboardData.getData("text/PLAIN");
document.execCommand("insertText", true, datos);
});
$(document).on("paste", ".parrafo_editable", function(e){
var texto = $(this).text() + event.clipboardData.getData('text/PLAIN');
if(texto.length > 30){
e.preventDefault();
return false;
}
});
$(".btn-guardar").on("click", function(){
let nivel = new Array();
let subnivel = new Array();
let preguntas = new Array();
$(".panel-ficha .parrafo_editable").each(function(){
nivel.push($(this));
});
$(".panel-aspecto-descripcion .parrafo_editable").each(function(){
subnivel.push($(this));
});
$(".pregunta-preguntaInicial").each(function(){
preguntas.push($(this));
});
for(let niv of nivel){
console.log(niv.text());
}
console.log("=====================================================");
for(let subni of subnivel){
console.log(subni.text());
}
console.log("=====================================================");
for(let pre of preguntas){
console.log(pre.text());
}
});
});
* {
box-sizing: border-box;
}
.btn-guardar{
cursor:pointer;
}
.panel-aspecto-descripcion {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
}
.panel-ficha {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
}
.parrafo_editable {
margin: 0;
}
.btn-crearElemento {
margin-bottom: 10px;
/* margin-top: 10px; */
}
.btn-categoria {
margin-bottom: 10px;
}
.btn-guardar {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
background-color: #00a65a;
box-shadow: none;
border: 1px solid #008d4c;
border-radius: 3px;
color: #fff;
}
.comboBox:hover{
cursor: not-allowed;
}
.text:hover{
cursor: not-allowed;
}
.subirArchivo:hover{
cursor: not-allowed;
}
/*========================================================*/
.contenedor-panel{
/* display: flex;
flex-direction: column; */
width: 100%;
font-weight: 700;
font-size: 16px;
}
.panel-ficha{
background: #f5f5f5;
border: 1px solid #ddd;
padding: 10px 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 2px 1px rgba(0,0,0,.05);
cursor: pointer;
margin-bottom: 20px;
}
.panel-aspecto{
display: none;
}
.panel-aspecto-descripcion-indicadores{
display: none;
}
/*------------------------------------*/
.panel-aspecto-descripcion{
width: 100%;
font-weight: 700;
font-size: 16px;
background: #D7CCC8;
border: 1px solid #A1887F;
padding: 10px 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 2px 10px #BCAAA4;
cursor: pointer;
margin-bottom: 10px;
}
/*---------------------------------------*/
.panel-aspecto-descripcion-indicadores-descripcion{
width: 100%;
font-weight: 700;
font-size: 16px;
background: #FFFDE7;
border: 1px solid #FFF9C4;
padding: 10px 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 2px 10px #BCAAA4;
cursor: pointer;
margin-bottom: 10px;
}
/*---------------------------------------*/
.estilos-ficha-supervision{
font-size: 14px;
line-height: 1.42857143;
}
/*=================================================================================*/
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
/*CONTENEDOR*/
.contenedorTotalPreguntas {
width: 100%;
margin: 0 auto;
font-family: "Source Sans Pro", sans-serif;
font-weight: 500;
}
/*PUNTAJE*/
.puntaje {
font-family: "Source Sans Pro", sans-serif;
font-size: 14px;
color: white;
height: 30px;
background: #3c8dbc;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.puntaje-hijo {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
}
.puntaje-descripcion {
width: 41%;
}
.puntaje-puntuacion {
width: 8%;
}
/*OBSERVACIONES*/
.observacion {
font-family: "Source Sans Pro", sans-serif;
font-size: 14px;
color: #333;
height: 30px;
background: #ecf0f5;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
margin-top: 5px;
}
.observacion-hijo {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
}
.observacion-descripcionInicial {
width: 33%;
}
.observacion-puntuacion {
width: 8%;
}
.observacion-descripcionFinal {
width: 16%;
}
.observacion-i {
width: 4%;
}
.observacion-malo {
background-color: #fb86af;
}
.observacion-regular {
background: #fbd386;
}
.observacion-bueno {
background: #cdf69d;
}
.observacion-muyBueno {
background: #cdf69d;
}
.observacion-acciones {
/* width: 4%; */
flex-grow: 1;
}
/*PREGUNTA*/
.pregunta {
/* font-family: "Source Sans Pro", sans-serif;
font-size: 14px;
color: #333;
height: 55px;
display: flex;
flex-direction: row;
align-items: center; */
width: 100%;
}
.pregunta-contenedor {
font-family: "Source Sans Pro", sans-serif;
font-size: 14px;
color: #333;
/* height: 49px; */
height: auto;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.pregunta-hijo {
display: flex;
justify-content: center;
align-items: center;
height: 49px;
}
.pregunta-preguntaInicial {
/* display: flex; */
display: block;
width: 33%;
height: auto;
/* justify-content: flex-start; */
padding: 15px 15px;
text-align: justify;
}
.pregunta-comboBox {
width: 8%;
}
/**/
select {
cursor: pointer;
}
option {
cursor: pointer;
}
/**/
.pregunta-radioButton {
width: 8%;
}
/**/
input[type="radio"] {
cursor: pointer;
}
/**/
.pregunta-text {
width: 16%;
}
/*text esta dentro de .pregunta-text*/
.text {
padding: 6px 12px;
height: 35px;
width: 230px;
border: 1px solid #d2d6de;
}
/*text esta dentro de .pregunta-text*/
.pregunta-subirArchivo {
width: 4%;
}
.pregunta-iconos {
/* width: 4%; */
flex-grow: 1;
justify-content: center;
}
/**/
.pregunta-iconos img {
cursor: pointer;
padding: 0 5px;
}
/**/
/*btn-pregungta esta afuera del contenedor "pregunta"*/
.btn-pregunta {
margin-bottom: 10px;
}
/*btn-pregungta esta afuera del contenedor "pregunta"*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Administración | Fichas de Evaluación</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
</head>
<body class="skin-blue">
<div class="box-body">
<input type="submit" class="btn-crearElemento" value="Crear menú desplegable">
<div class="contenedor-panel"></div>
<input class="btn-guardar" type="submit" value="GUARDAR CAMBIOS">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//ELEMENTOS PRINCIPALES
let btn_crearElemento = document.querySelector(".btn-crearElemento")
const contenedor_panel = document.querySelector(".contenedor-panel")
btn_crearElemento.addEventListener("click", function() {
//CREACION DE VARIABLES CON SUS ATRIBUTOS EN DONDE SE ALOJARAN LOS DIV CREADOS
const panel_ficha = document.createElement("div")//TODO: CAMBIO POR AQUI : onpaste="evitarPegarContenido();"
panel_ficha.innerHTML = '<p class="parrafo_editable" contentEditable="true" onkeypress="return limitar(event, this.textContent, 30)">panel_ficha</p> <div class="contenedor_icon"><img class="cambiar_nombre" onclick="cambiar_nombre(this);" src="https://img.icons8.com/material-sharp/20/000000/pencil.png"> <img onclick="eliminar_elemento(this);" class="img-panel-aspecto-descripcion" title="eliminar" src="https://img.icons8.com/ios/20/000000/waste-filled.png"></div>'
panel_ficha.contentEditable = false
panel_ficha.classList.add("panel-ficha")
const panel_aspecto = document.createElement("div")
panel_aspecto.innerHTML = "panel_aspecto"
panel_aspecto.classList.add("panel-aspecto")
const panel_aspecto_descripcion = document.createElement("div")
panel_aspecto_descripcion.innerHTML = '<p class="parrafo_editable" contentEditable="true" onkeypress="return limitar(event, this.textContent, 30)">panel_aspecto_descripcion</p> <div class="contenedor_icon"><img class="cambiar_nombre" onclick="cambiar_nombre(this);" src="https://img.icons8.com/material-sharp/20/000000/pencil.png"> <img onclick="eliminar_elemento(this);" class="img-panel-aspecto-descripcion" title="eliminar" src="https://img.icons8.com/ios/20/000000/waste-filled.png"></div>'
panel_aspecto_descripcion.contentEditable = false
panel_aspecto_descripcion.classList.add("panel-aspecto-descripcion")
const panel_aspecto_descripcion_indicadores = document.createElement("div")
panel_aspecto_descripcion_indicadores.textContent = "panel_aspecto_descripcion_indicadores"
panel_aspecto_descripcion_indicadores.classList.add("panel-aspecto-descripcion-indicadores")
//-------------------------------
const boton_aspecto = document.createElement("input")
boton_aspecto.setAttribute("class", "btn-categoria")
boton_aspecto.setAttribute("type", "submit")
boton_aspecto.setAttribute("value", "AGREGAR UNA CATEGORIA")
//-------------------------------
contenedor_panel.appendChild(panel_ficha)
contenedor_panel.appendChild(panel_aspecto)
panel_aspecto.appendChild(panel_aspecto_descripcion)
panel_aspecto.appendChild(panel_aspecto_descripcion_indicadores)
//--------------------------------
panel_aspecto_descripcion_indicadores.after(boton_aspecto)
//-------------------------------
boton_aspecto.addEventListener("click", () => {
const panel_aspecto_descripcion2 = document.createElement("div")
panel_aspecto_descripcion2.innerHTML = '<p class="parrafo_editable" contentEditable="true" onkeypress="return limitar(event, this.textContent, 30)">panel_aspecto_descripcion</p> <div class="contenedor_icon"><img class="cambiar_nombre" onclick="cambiar_nombre(this);" src="https://img.icons8.com/material-sharp/20/000000/pencil.png"> <img onclick="eliminar_elemento(this);" class="img_panel_aspecto_descripcion" title="eliminar" src="https://img.icons8.com/ios/20/000000/waste-filled.png"></div>'
panel_aspecto_descripcion2.contentEditable = false
panel_aspecto_descripcion2.classList.add("panel-aspecto-descripcion")
const panel_aspecto_descripcion_indicadores2 = document.createElement("div")
panel_aspecto_descripcion_indicadores2.textContent = "panel_aspecto_descripcion_indicadores"
panel_aspecto_descripcion_indicadores2.classList.add("panel-aspecto-descripcion-indicadores")
panel_aspecto.appendChild(panel_aspecto_descripcion2)
panel_aspecto.appendChild(panel_aspecto_descripcion_indicadores2)
boton_aspecto.remove()
panel_aspecto_descripcion_indicadores2.after(boton_aspecto)
editarSinInterrupcion();
})
const img_panel_aspecto_descripcion = document.querySelector(".img-panel-aspecto-descripcion")
editarSinInterrupcion();
})
//-------------------------------
function eliminar_elemento(valor) {
valor.parentNode.parentNode.parentNode.removeChild(valor.parentNode.parentNode.nextElementSibling)
valor.parentNode.parentNode.parentNode.removeChild(valor.parentNode.parentNode)
}
function cambiar_nombre(valor) {
valor.parentNode.previousElementSibling.contentEditable = true
valor.parentNode.previousElementSibling.focus();
}
function limitar(e, contenido, caracteres) {
var unicode = e.keyCode ? e.keyCode : e.charCode;
if (unicode == 8 || unicode == 46 || unicode == 13 || unicode == 9 || unicode == 37 || unicode == 39 || unicode == 38 || unicode == 40)
return true;
if (contenido.length >= caracteres) {
return false;
}
return true;
}
function editarSinInterrupcion() {
let cambiar_nombre = document.querySelectorAll('.cambiar_nombre');
let parrafo_editable = document.querySelectorAll('.parrafo_editable');
for (let i = 0; i < cambiar_nombre.length; i++) {
cambiar_nombre[i].addEventListener("click", (e) => {
e.stopPropagation();
})
}
for (let i = 0; i < parrafo_editable.length; i++) {
parrafo_editable[i].addEventListener("click", (e) => {
e.stopPropagation();
})
}
}
</script>