Estoy tratando de devolver/salir el valor de altura más grande de varios divs dentro de una alerta usando jQuery o JavaScript. He probado algunos ejemplos, pero creo que lo estoy haciendo de la manera incorrecta. Decidí usar Math.max pero creo que es incorrecto. Además, me gustaría devolver solo el valor más alto del div que es visible.
Entonces, en general, me gustaría devolver el valor de altura del div más alto donde la visibilidad: visible
Mi código
$(".go-buttn").click(function(){ var sum = 0; var x = document.querySelectorAll(".block div"); var maxValueInArray = Math.max.apply(Math, x); alert($(maxValueInArray).height()); }); <button class="go-button">Click me </button> <div class="block"> <div style="visibility:visible;"> //This first div should return the tallest value in height <p> test </p> <p> test </p> <p> test </p> </div> <div> //Although This Div is taller than the first div this div is set to visibility hidden so we should not return this height value <p> test </p> <p> test </p> <p> test </p> <p> test </p> </div> <div style="style="visibility:visible;"> <p> Test </p> </div> <div style="visibility:hidden;> <p> Test </p> </div> </div>ACTUALIZAR Hice cambios basados en sugerencias al código a continuación, pero todavía no puedo mostrar solo el div más alto que es visible.
$(".go-buttn").click(function(){ var x = Array.from(document.querySelectorAll(" .block div")).map(e => $(e).outerHeight()); var maxValueInArray = Math.max.apply(Math, x); $('.dealer:visible').css('height',maxValueInArray); });Aquí hay una respuesta de JQuery a su pregunta:
Usando un enfoque estatal
$(() => { // console.debug("Document ready..."); // register the click function $(".go-button").click(function(){ // using a state let currentMax = 0; // loop through each element $(".block p:visible").each((index, el) => { // update the state if current element's height is larger currentMax = Math.max($(el).height(), currentMax); console.debug(`Current element's height: ${$(el).height()}`); }) console.log(`Max height is ${currentMax}`); }); });Como intentó usar la variante "Math.max" para la matriz, la solución también se puede condensar en una sola línea usando la función "mapa".
El enfoque de una sola línea
$(() => { // console.debug("Document ready..."); $(".go-button").click(function(){ const currentMax = Math.max(...$(".block p:visible").map((index, el) => $(el).height())) console.log(`Max height is ${currentMax}`); }); });El enfoque de estado tiende a ser más fácil de leer para otros desarrolladores y ampliar la funcionalidad más adelante, por ejemplo, si necesita hacer otras cosas con el elemento además de registrar el estado. Pero si el resultado numérico es todo lo que se necesita, podría decirse que hay menos código para leer con el de una sola línea, siempre que tenga los nombres apropiados.
Aquí hay un fragmento con una etiqueta p de diferente altura para probar el código: https://codepen.io/gordonso/pen/LYzLGzz?editors=1111
Actualización: al volver a leer la pregunta, hay un requisito específico sobre la altura del elemento visible. Como tal, el selector deberá ser "$(".block p:visible")" para excluir elementos con el atributo "oculto".
Hay ciertas suposiciones hechas en JQuery sobre el selector de visibilidad, documentadas aquí: https://api.jquery.com/visible-selector/
apply toma una matriz como su segundo parámetro
Por la forma en que lo estás usando, supongo que querrás pasar una serie de alturas.
var x = Array.from(document.querySelectorAll(".col-lg-6.col-md-12.col-sm-12 .block")).map(e => $(e).height()); var maxValueInArray = Math.max.apply(Math, x); alert(maxValueInArray);Si necesita el elemento real, no solo la altura máxima, puede ordenar la matriz y obtener el primer valor:
var x = Array.from(document.querySelectorAll(".col-lg-6.col-md-12.col-sm-12 .block")); var maxValueInArray = x.sort((a,b) => $(b).height() - $(a).height())[0]; alert($(maxValueInArray).height());Respuesta a la pregunta actualizada:
Puede usar display:none en lugar de visibility:hidden y la altura del elemento se reducirá a cero.
O, si necesita usar visibilidad, simplemente verifique dentro de la función de map antes de devolver la altura de cada elemento:
var x = Array.from(document.querySelectorAll(".col-lg-6.col-md-12.col-sm-12 .block")).map(e => $(e).css("visibility") !== "hidden" ? $(e).height() : -1);const divs = document.querySelectorAll("p"); let max = 0; divs.forEach((div)=> { if(div.offsetHeight > max) max = div.offsetHeight; }); console.log(max);