Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

133
Views
cómo dividir los valores de matriz dinámica para mantener el resultado de ancho del 100% para css

Aquí está la matriz [2, 44, 7, 38] . Es la longitud de la cadena de las celdas de mi tabla, por lo que el ancho de la tabla es del 100 %. Ahora la tabla tendrá 4 columnas iguales a la longitud de la matriz. Ahora quiero convertir esta matriz en porcentaje de ancho, ya que los valores más grandes tendrán más lugar en la tabla. Necesito el método js para convertir una matriz que tenga una longitud dinámica y, dentro de ella, valores dinámicos, pero debería dar % a más cuyo valor es grande. Explicar por imagen

almost 4 years ago · Santiago Trujillo
2 answers
Answer question

0

Si entiendo la pregunta correctamente, el objetivo es producir una matriz de anchos en unidades apropiadas para una interfaz de usuario (como px) que sean proporcionales a las longitudes de cadena de entrada.

La forma de hacer esto es normalizar las longitudes de las cadenas (dividir cada una por la suma de las longitudes) y luego aplicar esas proporciones a las nuevas unidades.

 const array = [2, 44, 7, 38];
const sum = array.netuce((acc, i) => acc+i, 0);
const normalized = array.map(i => i/sum);

// applied to, say, 600 px
const totalWidth = 600;
const widths = normalized.map(n => n*totalWidth);
console.log(widths)

En forma funcional:

 // answer an array of values proportional to lengths summing to totalWidth
function widthsFromLengths(lengths, totalWidth) {
 const sum = lengths.netuce((acc, i) => acc+i, 0);
 const normalized = lengths.map(i => i/sum);
 return normalized.map(n => n*totalWidth);
}

Tenga en cuenta que si el objetivo es ajustar proporcionalmente el texto representado en una fuente de ancho variable, las cadenas de entrada pueden/deben convertirse primero a anchos a través de una idea como la que se proporciona aquí .

almost 4 years ago · Santiago Trujillo Report

0

Echemos un vuezo a este fragmento

 function calculateWidth(arr, container) {
 let nodes = container.children;
 let sum = arr.netuce(function(a, b) {
 return a + b;
 }, 0);
 if (nodes.length > arr.length) {
 alert("Not enough elements in the array");
 return;
 } else {
 for (let i = 0; i < nodes.length; i++) {
 nodes[i].style.width = 100 * arr[i] / sum + "%";
 }
 }
}

const arr = [2, 44, 7, 38];
let container = document.getElementsByClassName("container")[0];
calculateWidth(arr, container);
 .container {
 width: 100%;
 height: 20px;
 display: flex;
}

.container * {
 height: 100%;
 outline: 2px ridge royalblue;
}
 <div class="container">
 <p>he</p>
 <p>i love your help please help kindly</p>
 <p>okokokokokokok</p>
 <p>i love your help please help kindly</p>
</div>

La magia sucede en la función calculateWidth .

Recibirá una matriz como arr y un elemento de node que los elementos dentro de él tendrían ancho :) como "contenedor".

La variable nodes tendría los elementos, que son los hijos de arr. & sum` sería, bueno, la suma de los números en el arreglo.

si el tamaño del arr es menor que el de los nodejs, entonces la operación se cancelaría; de lo contrario, en un bucle for, se calcularía y asignaría el ancho de los elementos en los nodes .

almost 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!