2

mi problema es el siguiente. Estoy recogiendo el contenido de varias etiquetas p (que se van añadiendo según cuantas quiera el usuario) de un div. Al recogerlas me encuentro con la problemática de que me aparecen juntas, sin separación de por medio. Lo que me interesa es poder separarlas y meterlas separadas en un array. Adjunto un ejemplo de código en el que el usuario habría metido dos etiquetas (pueden ser más). Como se ve en el alert, me muestra ambas juntas, sin separación de por medio. Lo que me interesa es separarlas y meterlas en un array, y la siguiente vez que el usuario añada otra, meterla al final de dicho array. Gracias de antemano

<!DOCTYPE html>
      <html>
      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script>
        $(document).ready(function(){
          $("button").click(function(){
            $(function(){
   	         if($('#select p')){
                  alert($('#select p').text())
             }
            });
    	
  	      });
        });
        </script>
      </head>
    <body>
      <button>Prueba</button>
      <div id="select"><p>Ejercicio1</p>
      <p>Ejercicio2</p></div>
    </body>
    </html>

6
  • No entiendo cuál es el problema. ¿Quieres mostrarlas separadas en el alert? ¿De qué modo el usuario ingresa los elementos p? Es ahí donde debes aprovechar para meterlos en el array.
    – A. Cedano
    el 17 mar. 2020 a las 11:38
  • Los ingresa con un drag and drop. El problema es que se encuentra en otra función. Por eso no lo puedo hacer de primeras la inserción en el array. De todas formas la solución que ha dado phpMyGuel me vale, con eso los añadire. Gracias el 17 mar. 2020 a las 11:50
  • Pero aunque sea otra función puedes recoger los valores allí y meterlos en un array que puedes declarar fuera de esa función para así tenerlo disponible donde lo necesites. De lo contrario, tendrás que volver a leer lo que ya se ingresó, quedando el código menos optimizado de ese modo.
    – A. Cedano
    el 17 mar. 2020 a las 11:53
  • Si, me viene mejor, no quería dejar variables globales, pero al final se hace más óptimo de esta forma. Muchas gracias! el 17 mar. 2020 a las 12:02
  • Lo que dices aquí no concuerda con no querer tener un array fuera de las funciones: Lo que me interesa es separarlas y meterlas en un array, y la siguiente vez que el usuario añada otra, meterla al final de dicho array. ¿Cómo piensas entonces mantener el array, o sea, meter los nuevos valores? ¿Cada vez vas a recorrer de nuevo todos los elementos p para meter el nuevo? Creo que estás implementando una lógica redundante sin necesidad. Dos soluciones son posibles: o mantener el array actualizado cuando se ingresan los datos o recoger todos los valores una sola vez al finalizar.
    – A. Cedano
    el 17 mar. 2020 a las 12:53

2 respuestas 2

3

Te aparecen juntos porque al hacer alert($('#select p').text()) estás llamando al texto de todos los <p> que tengan como ancestro un elemento #select, en tu caso, como tienes 2 lo que va a hacer es imprimir su texto simultaneamente.

Si quieres diferenciarlos por separado debes capturar los párrafos para poder despues iterarlos y sacar su contenido uno a uno:

$(function(){
  $("button").click(function() {
    let parrafos = $('#select p');
    
    parrafos.each(function () {
      alert($(this).text());
    });
  });
});
<!DOCTYPE html>
      <html>
      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script>
        
        </script>
      </head>
    <body>
      <button>Prueba</button>
      <div id="select"><p>Ejercicio1</p>
      <p>Ejercicio2</p></div>
    </body>
    </html>

De esta manera, en cada iteración de la función each() te sería sencillo añadir el valor a un array.

Referencia: each()

1
1

Por si puede servir, en un contexto donde, al final de todo se necesite un array de los elementos <p>, para mostrarlos por ejemplo en el DOM, el método get() haría el trabajo de meter en un array todos los elementos HTML alcanzados por el selector.

Ejemplo:

<!DOCTYPE html>
      <html>
      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script>

        </script>
      </head>
    <body>
      <button>Prueba</button>
      <div id="select"><p>Ejercicio1</p>
      <p>Ejercicio2</p></div>
    </body>
    </html>

<!DOCTYPE html>
      <html>
      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script>
        $(document).ready(function(){
          $("button").click(function(){
            $(function(){
   	         if($('#select p')){
                  console.log($('#select p').get());
             }
            });
    	
  	      });
        });
        </script>
      </head>
    <body>
      <button>Prueba</button>
      <div id="select"><p>Ejercicio1</p>
      <p>Ejercicio2</p></div>
    </body>
    </html>

Tu Respuesta

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

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