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

我正在嘗試使用 jQuery 或 JavaScript 從警報中的多個 div 中回傳/輸出最大的高度值。我已經嘗試了幾個例子，但我認為我的做法是錯誤的。我決定使用 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);
            

        });

uj5u.com熱心網友回復：

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

回答更新的問題：

您可以使用display:none代替，visibility:hidden元素的高度將折疊為零。

或者，如果您需要使用可見性，只需map在回傳每個元素的高度之前檢查函式內：

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

uj5u.com熱心網友回復：

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

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

console.log(max);

uj5u.com熱心網友回復：

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

使用狀態方法

$(() => {
  // 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”函式將解決方案壓縮為單行代碼。

單線方式

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

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

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

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

JQuery 中有一些關于可見性選擇器的假設，記錄在這里：https : //api.jquery.com/visible-selector/

標籤：javascript 查询

上一篇：Wordpress聯系表7根據推薦url動態自動選擇下拉欄位

下一篇：下拉選擇的選項會改變容器和搜索框之間的顏色和間隙