2

Quiero seleccionar a todas las etiquetas del DOM que contengan texto, por ejemplo:

$("p").not('p[innerText= ""]')

Cuando selecciono de esa manera, igual me trae etiquetas sin texto

5 respuestas 5

1

Intenta siempre usar vanilla JavaScript para optimizar el rendimiento de tu código, en este caso el objetivo es buscar todos los elementos que compartan el mismo tag y excluir aquellos que no tengan contenido, en este caso es P así quévamos a crear un array para guardar los resultados de los tags que se encuentren con contenido.

var result = [];
var elementos = document.getElementsByTagName("p");

function myFunction() {
 
  for (i = 0; i < elementos.length; i++) {
    if (elementos[i].innerHTML != "") {
      result.push(elementos[i].innerHTML);
    }
  }
  console.log(result);
}
<p>1</p>
<p></p>
<p>2</p>
<p></p>
<p>3</p>

<button onclick="myFunction()">Obten solamente los P tags con contenido</button>

0

Podrías hacerlo a través e la pseudo-clase :empty y a través de la función not() como bien has determinado.

$(function () {
  let parrafos = $('p').not($('p:empty'));
  console.log(parrafos);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Uno</p>
<p>Dos</p>
<p></p>
<p>Cuatro</p>
<p></p>
<p>Seis</p>

Referencia: :empty

0

Puedes usar la combinación de los selectores :not y :empty:

$('p:not(:empty)')
0

Puedes hacerlo con JS puro de esta forma:

Tienes un grupo de etiquetas con una clase en común:

<p class="elemento">Uno</p>
<p class="elemento">Dos</p>
<p class="elemento">Tres</p>
<p class="elemento">Cuatro</p>
  • Posterior las obtienes todas en una variable por medio de querySelectorAll() esto devolverá un node list
  • Recorres dicha variable por medio del ciclo forEach
  • Declaras un vector vacío que almacene por ejemplo los textos de cada una, solamente donde la propiedad innerText sea distinto de vacía
  • Imprimes el vector por fuera y así obtienes cuales si tienen texto de las que no

Código

let elemento = document.querySelectorAll(".elemento")
let conValor = []
elemento.forEach((etiqueta) => {
  if (etiqueta.innerText != "") {
    conValor.push(etiqueta.innerText)
  }
})
console.log(conValor)
0

Aunque expresamente indicas que la solución la quieres con jquery o js, lo puedes hacer fácilmente con css usando las pseudo clases :not y :empty

   <p>Estos</p>
  <p>párrafos</p>
   <p></p>
   <p>se</p>
   <p></p>
  <p>marcarán</p>

   p {
  background-color: pink;
  width: 100px;
  height: 40px;
  }

 p:not(:empty) {
 background-color: red;
  }

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.