如何使用 jQuery 或 JavaScript 從多個 div 中返回最大的高度值

Question

我正在嘗試使用 jQuery 或 JavaScript 在警報中的多個 div 中返回 / output 的最大高度值。 我已經嘗試了一些示例，但我認為我的做法是錯誤的。 我決定使用 Math.max 但我認為這是不正確的。 另外，我只想返回可見的 div 的最大值。

所以總的來說，我想返回可見性：可見的最高 div 的高度值

我的代碼

    $(".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>

更新我根據以下代碼的建議進行了更改，但我仍然無法僅顯示可見的最高 div。

        $(".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);
            

        });

Answer 1

apply將數組作為其第二個參數

你使用它的方式，我假設你想傳入一個高度數組。

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);

---

如果您需要實際元素，而不僅僅是最大高度，您可以對數組進行排序並獲取第一個值：

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());

Answer 2

const divs = document.querySelectorAll("p");
let max = 0;

divs.forEach((div)=> {
    if(div.offsetHeight > max)
        max = div.offsetHeight;
});

console.log(max);

Answer 3

這是 JQuery 對您的問題的回答：

使用 state 方法

$(() => {
  // 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}`);
  });
});

正如您嘗試對數組使用“Math.max”變體一樣，也可以使用“map”function 將解決方案壓縮為單行。

單線方法

$(() => {
  // 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}`);
  });
});

state 方法往往更容易讓其他開發人員在以后閱讀和擴展功能，例如，如果您需要對元素執行其他操作，而不是需要記錄 state。 但是，如果只需要數字結果，那么可以說使用單行代碼讀取的代碼更少，只要它具有適當的命名即可。

這是一個帶有不同高度的 p 標簽的片段來測試代碼： https://codepen.io/gordonso/pen/LYzLGzz?editors=1111

更新：重新閱讀問題后，對可見元素的高度有特定要求。 因此，選擇器需要是 "$(".block p:visible")" 以排除具有 "hidden" 屬性的元素。

JQuery 中對可見性選擇器進行了某些假設，此處記錄： https://api.jquery.com/visible-selector/