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
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadIntenta 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;
}