Quiero obtener el contenido de unas las etiquetas
con class=".parrafo_editable", pero me sale error y no sé que puedo estar haciendo mal.
$(".panel-ficha .parrafo_editable").each(function(indice, elemento){
elemento.text();//Acá supuestamente es el error
});
Aquí el código completo:
$(document).ready(function() {
$(".contenedor-panel").on("click", ".panel-ficha", function() {
var t = $(this); //t es panel-ficha
var tp = t.next(); //tp es panel-aspecto
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);
});
//TODO:
$(document).on("paste", ".parrafo_editable", function(e){
var texto = $(this).text() + event.clipboardData.getData('text/PLAIN');
if(texto.length > 30){
e.preventDefault();
alert("No puede escribir más de 30 caracteres");
return false;
}
});
});
* {
box-sizing: border-box;
}
.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;
}
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"*/
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div contenteditable="false" class="panel-ficha">
<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>
</div>
<div contenteditable="false" class="panel-ficha">
<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>
</div>
elemento.text();
? ¿Obtener el valor del elemento? ¿cambiar el valor del elemento? Así es un sin sentido realmente.cambiar_nombre