如何根據其類獲取一組div的最大寬度？

Question

我試圖找出一個發生事件（如“ onchange”）的JavaScript函數。 將使用某個類別拆分所有div的寬度，選擇最大值並將該類別的寬度設置為該最大值。 我知道如何做第二部分，但是在確定類的最大寬度時遇到了問題。 同一類的div位於不同的父div中，並且它們的id遞增，例如：div1，div2，div3 ...如果有幫助的話。 我知道這里有兩個非常相似的問題，但是當它基於類以及div位於不同的父div中時，我找不到答案。 謝謝

Answer 1

開始了

 $("button").click(function(){ $(".dad div").css("width",$(".dad div").css("max-width")); }); 

 .dad { display: table; border: 1px solid black; height: 100px; max-width: 10000px; width: 100px; } .dad div { display: table; border: 1px solid black; height: 100px; max-width: 10000px; width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>MAX WIDTH!</button> <div class="dad"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div> 

Answer 2

您可以使用下面的函數在所有div中獲得最大寬度

function getMaxWidth() {
    max = 0;
    $("div .image").each(function(){
        c_width = parseInt($(this).width());
        if (c_width > max) {
            max = c_width;
        }
    });
    return max;
}

工作小提琴

Answer 3

您可以通過運行document.getElementsByClassName(className)獲得具有特定類的所有div，而與className的div具有不同的父元素無關緊要。

您可以使用getBoundingClientRect()方法獲取每個div的寬度，這是將其映射到數組的方法：

var widths = [].slice.call(document.getElementsByClassName(className))
  .map(function(div){ return div.getBoundingClientRect().width; });

然后，您可以使用Math.max()獲得最大值：

var maxWidth = Math.max.apply(null, widths);

在那里，您擁有了！

Answer 4

您可以在onchange上運行此腳本

 document.getElementsByClassName('some-class');
 var id = null;
 var maxw = 0; 
 for(var i=0;i<x.length;i++){
    if(x[i].clientWidth > maxw){
       maxw = x[i].clientWidth;
       id = x[i].id
    }
 }

id將具有該元素的最大寬度的id，而maxw將具有該類的max的最大值，然后您可以將該寬度賦予該類的所有元素。 該解決方案將不再依賴jQuery。