1

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>

4
  • ¿Y qué se supone que quieres hacer con esa línea: elemento.text();? ¿Obtener el valor del elemento? ¿cambiar el valor del elemento? Así es un sin sentido realmente.
    – A. Cedano
    Commented el 17 abr. 2019 a las 16:44
  • El código que has puesto no funciona porque falta la función cambiar_nombre Commented el 17 abr. 2019 a las 16:46
  • No no, solo quiero obtener el contenido de las etiquetas <p class="parrafo_editable"> Commented el 17 abr. 2019 a las 16:49
  • Por eso no sé como puedo hacer para el contenido, pense que con .text() se resolveria el problema. Commented el 17 abr. 2019 a las 16:50

3 respuestas 3

2

No funciona porque element como lo usas dentro del bucle no es reconocido como una variable de jQuery.

Puedes usar $(this):

$(".panel-ficha .parrafo_editable").each(function(indice){
    console.log($(this).text());//Acá supuestamente es el error
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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 id="a" 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>


O puedes seguir usando element, pero con un método de obtención de Javascript puro, como puede ser textContent:

$(".panel-ficha .parrafo_editable").each(function(indice,element){
    console.log(element.textContent);    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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 id="a" 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>

2
  • a yaaaaaa, que interesante!!!! Tendré que tener más cuidado con Jquery. Como use mi lógica no pensaba que iba a fallar, pero al final era Jquery. Gracias @A.Cedano. Commented el 17 abr. 2019 a las 17:14
  • @GianFrancoAlexisPomaVidal jQuery es curioso con eso. En algunos casos cuando quieres crear referencias a elementos, si no le pones la $ delante luego no puedes usar métodos propios de jQuery con ese elemento. Para casos como each siempre es mejor usar $(this) en el contexto de jQuery.
    – A. Cedano
    Commented el 17 abr. 2019 a las 17:26
1

Modifica tu evento de la siguiente forma:

$(".panel-ficha .parrafo_editable").each(function(){
    $(this).text();
});
1

puedes hacerlo asi tambien: pasando el elemento a jquery con $(elemento)!

$(".panel-ficha .parrafo_editable").each(function(indice,elemento){
    console.log($(elemento).text()); //Acá supuestamente es el error
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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 id="a" 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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.