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
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>
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
Puedes usar la combinación de los selectores :not
y :empty
:
$('p:not(:empty)')
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>
querySelectorAll()
esto devolverá un node listforEach
innerText
sea distinto de vacíaCódigo
let elemento = document.querySelectorAll(".elemento")
let conValor = []
elemento.forEach((etiqueta) => {
if (etiqueta.innerText != "") {
conValor.push(etiqueta.innerText)
}
})
console.log(conValor)
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;
}