Intento seleccionar el último elemento que no está vacío de una clase.
Por ejemplo, aquí me gustaría seleccionar el segundo elemento:
<span class="test">A</span> <span class="test">B</span> <span class="test"></span> <span class="test"></span>Pero debido a que el texto interno cambia (con las acciones del usuario), no puedo simplemente usar
document.querySelector(".test:nth-of-type(2)");He intentado esto pero no funciona:
document.querySelector('.test:not(:empty):nth-last-of-type(1)'); function myFunction(){ document.querySelector('.test:not(:empty):nth-last-of-type(1)').innerText = "test"; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="test">A</span><br> <span class="test">B</span><br> <span class="test"></span><br> <span class="test"></span><br> <input type="button" value="change 2nd element" onclick="myFunction()"/>¿Por qué usar querySelector para esto? Yo sugeriría esto:
document .querySelectorAll('.test') // all with test class .filter(elem => elem.innerText !== '') // only not empty .at(-1) // last element // or, if you need backward browser compatibility: document .querySelectorAll('.test') // all with test class .filter(elem => elem.innerText !== '') // only not empty .reverse()[0]