0
296
ViewsCómo lidiar con el elemento oculto sin eliminarlo: actualizar la longitud del DOM cuando el elemento está oculto
Tengo una lista de marcas con este aspecto:
cada elemento tiene un estilo de borde inferior y utilicé el siguiente código para eliminar el estilo de borde inferior cuando hay menos de 5 elementos y funciona perfectamente hasta que realiza una búsqueda y algunos de estos elementos están ocultos. El problema es que incluso display = 'none'; no elimina los elementos de DOM. De acuerdo con DOM, su longitud es la misma, por lo que incluso hay un elemento y otros están ocultos. El estilo de borde está ahí. (imagen debajo del código)
&:nth-child(5n+1):nth-last-child(-n+5), &:nth-child(5n+1):nth-last-child(-n+5) ~ .brands__list-item { @apply lg:border-b-0; } 
Quitar elementos del DOM en lugar de ocultarlos funciona, pero necesito estos elementos más adelante, así que no puedo quitarlos. Quiero que los elementos tengan un borde Si una fila tiene más de 5 elementos. ¿Cómo puedo abordar este problema de elementos ocultos? Abierto a cualquier sugerencia.
1 answers
Answer question0
No conozco ninguna propiedad exacta para usarlo, pero aquí hay algunos trucos que puede usar.
Solo coloca el elemento oculto en una clase y dale estilo con display:none .
Después de agregar esa clase, simplemente use:
length2=DOM.classList.contains('classWithHiddenProp'); totalLength_of_DOM = totalLength - length2;