Tengo una lista de divs que pueden ser display:none o display:flex dinámicamente dependiendo de algunas condiciones.
¿Cómo verifico, dado que esto es dinámico, cuál es el último div que muestra la flexión de la pantalla?
Mi código es algo como esto:
<div class="container"> <div style="display: flex"></div> <div style="display: none"></div> <div style="display: flex"></div> <div style="display: none"></div> </div> Como digo, los elementos secundarios pueden o no ser display:flex y pueden no estar necesariamente en este orden o pueden ser más elementos que estos o no. Necesito identificar el último elemento con display:flex , así que aplico un borderBottom con javascript.
Necesito identificar el último elemento con
display:flex, así que aplico un borderBottom con javascript.
Como tiene js disponible, considere usar un selector de CSS dirigido a la display: flex :
div[style="display: flex"] Luego obtenga el último elemento de la matriz (por ejemplo, usando pop() ), esos son los elementos que está buscando.
Css puro, esto no será posible.
const e = [ ...document.querySelectorAll('div[style="display: flex"]') ].pop(); e.style.border = '1px solid red'; <div class="container"> <div style="display: flex">a</div> <div style="display: none">b</div> <div style="display: flex">c</div> <div style="display: none">d</div> </div>cambia tus estilos a una clase
<div class="container"> <div class="flex">a</div> <div class="none">b</div> <div class="flex">c</div> </div>Una función para obtenerlo por nombre de clase.
function le(){ const container = document.querySelector(".container") const elements = container.getElementsByClassName("flex") return elements.item((elements.length - 1)) } console.log(le())y algo de css
.flex { display: flex } .none { display: none }esta es una solución más simple
$(".container").each(function() { $('div:visible:last', this).css("background","red"); }); <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="container"> <div style="display: flex">1</div> <div style="display: none">2</div> <div style="display: flex">3</div> <div style="display: none">4</div> </div> </body> </html>