Cuando se dan varios contenedores <divs> , cada uno con una cantidad de <divs> secundarios de diferentes dimensiones, quiero averiguar qué contenedor tiene la menor área cubierta por elementos secundarios.
<div class="container" id="first"> <div class="small">This is a message</div> <div class="medium">This is a message</div> <div class="large">This is a message</div> </div> <div class="container" id="second"> <div class="large">This is a message</div> <div class="large">This is a message</div> <div class="large">This is a message</div> </div>Estilos de ejemplo:
.container { width: 1000px; height: 1000px } .small { width: 100px; height: 50px } .medium { width: 200px; height: 100px } .large { width: 400px; height: 200px } Antecedentes: los usuarios pueden publicar un mensaje (hijo <div> ) en un tablón de anuncios (contenedor principal <div> ) y quiero resaltar el tablón de anuncios "más vacío".
Solo necesito ayuda con la lógica, probablemente pueda codificarlo desde allí
Puede calcular el área multiplicando el offsetWidth del elemento por su offsetHeight .
Declare dos variables, smallest , para almacenar el elemento más pequeño, y área smallestArea , para almacenar el área del elemento más pequeño.
Luego, seleccione todos los elementos con la clase de container y recorra cada uno. Verifique si el área (calculada al multiplicar el offsetWidth y la altura de offsetHeight de los elementos secundarios del elemento) es más pequeña que el área smallestArea . Si es así, sabemos que es más pequeño que el valor actual de smallest , por lo que asignamos el elemento actual a smallest y el área a área smallestArea .
Después de recorrer todos los elementos, el smallest será el elemento con el área más pequeña.
const containers = document.querySelectorAll('.container'); var smallest; var smallestArea; containers.forEach(e => { let area = [...e.children].reduce((a,b) => a += b.offsetHeight * b.offsetWidth, 0); if (!smallestArea || area < smallestArea) { smallest = e; smallestArea = area; } }) console.log(smallest) .container{width:1000px;height:1000px}.small{width:100px;height:50px}.medium{width:200px;height:100px}.large{width:400px;height:200px} <div class="container" id="first"> <div class="small">This is a message</div> <div class="medium">This is a message</div> <div class="large">This is a message</div> </div> <div class="container" id="second"> <div class="large">This is a message</div> <div class="large">This is a message</div> <div class="large">This is a message</div> </div>Puede obtener fácilmente el contenedor que tiene la menor área cubierta por elementos secundarios usando offsetWidth y offsetHeight y reduce
Para demostrar he añadido otro contenedor que tiene 3 niños small , small y medium .
const [container, size] = [...document.querySelectorAll(".container")].reduce((acc, curr) => { let currentContainerArea = 0; for (let child of curr.children) { currentContainerArea += child.offsetWidth * child.offsetHeight; } if (currentContainerArea < acc[1]) { acc[0] = curr; acc[1] = currentContainerArea; } return acc; }, [null, Number.MAX_SAFE_INTEGER]); console.log(size) console.log(container) .container { width: 1000px; height: 1000px; } .small { width: 100px; height: 50px; } .medium { width: 200px; height: 100px; } .large { width: 400px; height: 200px; } <div class="container" id="first"> <div class="small">This is a message</div> <div class="medium">This is a message</div> <div class="large">This is a message</div> </div> <div class="container" id="second"> <div class="large">This is a message</div> <div class="large">This is a message</div> <div class="large">This is a message</div> </div> <div class="container" id="third"> <div class="small">This is a message</div> <div class="small">This is a message</div> <div class="medium">This is a message</div> </div>