1

Al realizar una consulta en MySQL con PHP obtengo como resultado lo siguiente:

<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>

Varios párrafos con su respectiva etiqueta HTML <p>

Necesito mostrar en un <div> solo el primer párrafo <p> y en otro <div> los párrafos restantes.

Algo como esto:

<div class="sumario">
    <p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
</div>
<div class="cuerpo">
    <p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
</div>

Hasta el momento lo único que se me ha ocurrido es hacer lo siguiente para el sumario:

<?php echo substr(strip_tags($body, '<p>'), 0, 250); ?>

3
  • ¿Nos mostrarías lo que has intentado al momento por favor?
    – user128299
    Commented el 31 mar. 2020 a las 22:17
  • La verdad no se como hacerlo, lo único que se me ocurrió fue hacer esto <?php echo substr(strip_tags($body, '<p>'), 0, 250); ?> para ponerlo en el sumario. Commented el 31 mar. 2020 a las 22:19
  • Es un buen punto de arranque y le dará mejor recibimiento a tu pregunta, edita y colócalo aunque solo sea eso
    – user128299
    Commented el 31 mar. 2020 a las 22:20

3 respuestas 3

1

Recomendación:

Pues puedes tratarlo con JS puro, de esta forma no mezclas código de backend (PHP) con el uso de etiquetas de HTML:

  • Obtienes todos los párrafos y los almacenas en una variable por medio de querySelectorAll
  • Como en esa variable tienes un nodeList puedes iterar los elementos o indicar el acceso por medio de su índice o posición
  • Declaras 2 clases a nivel de CSS una por cada posible escenario
  • Dentro del foreach asignamos la clase a cada elemento
  • Para resetear y asignar una clase distinta al primer elemento simplemente indicamos su posición o índice y le damos la clase deseada

Con lo anterior:

  • El primer párrafo tendrá la clase .primero y será de color rojo
  • El resto de párrafos tendrá la clase .segundo y serán de color verde

EJEMPLO

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Código</title>
      <style>
        .primero {
          color: red;
        }
        .segundo {
          color: green; 
        }
      </style>
    </head>
    <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi tempore maxime deserunt architecto. Pariatur odit amet laudantium, commodi aut temporibus inventore mollitia iusto sapiente nemo sequi maiores, ut, vel.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi tempore maxime deserunt architecto. Pariatur odit amet laudantium, commodi aut temporibus inventore mollitia iusto sapiente nemo sequi maiores, ut, vel.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi tempore maxime deserunt architecto. Pariatur odit amet laudantium, commodi aut temporibus inventore mollitia iusto sapiente nemo sequi maiores, ut, vel.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi tempore maxime deserunt architecto. Pariatur odit amet laudantium, commodi aut temporibus inventore mollitia iusto sapiente nemo sequi maiores, ut, vel.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi tempore maxime deserunt architecto. Pariatur odit amet laudantium, commodi aut temporibus inventore mollitia iusto sapiente nemo sequi maiores, ut, vel.
    </p>
    <script>
        let parrafos = document.querySelectorAll("p")
        
        
        parrafos.forEach((elemento) => {
            elemento.setAttribute("class", "segundo")
        })
        parrafos[0].setAttribute("class", "primero")
        
    </script>
    </body>
    </html>

0
1

Guiándome de la respuesta que me dio @BetaM, hice lo siguiente:

Como tengo dos <div>

<div id="sumario"></div>
<div id="cuerpo"></div>`

Primero imprimo todo en el <div id="cuerpo"> y después con jQuery muevo el primer párrafo a <div id="sumario">:

var body = $("#cuerpo p");

$.each(body, function() {
  $('#sumario').append(body[0]);
});
0

Busca la primera etiqueta de cierre de párrafo para obtener el sumario y, desde ahí, obtienes el cuerpo:

<?php

$html = <<<EOT
<p>Primer párrafo: Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipiscing elit ut per.</p>
EOT;

// Obtener posición de primer cierre de párrafo
// Y agregar 5 (1 para posición) para incluir la etiqueta completa (4)
$cuenta = mb_strpos($html, '</p>') + 5;

// Obtener primer párrafo
$sumario = mb_substr($html, 0, $cuenta);

// Obtener resto del texto
$cuerpo = mb_substr($html, $cuenta + 1);

echo <<<EOT
<div class="sumario">
    $sumario
</div>
<div class="cuerpo">
    $cuerpo
</div>
EOT;

Nota: Estoy usando la estructura HEREDOC para crear y mostrar cadenas.

2
  • La longitud de los párrafos puede cambiar, no siempre serán 5, ¿como se hace en ese caso? Commented el 1 abr. 2020 a las 12:05
  • @JoseDarioCorrea, tal vez tu pregunta es por ese + 5, que no tiene que ver con la cantidad de párrafos, sino con la longitud de la cadena hasta el cierre del primer párrafo. Funciona desde 2 hasta una cantidad infinita de párrafos.
    – Triby
    Commented el 1 abr. 2020 a las 14:45

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.