Question

我试图弄清楚一个事件的JavaScript函数（比如'onchange'）。将使用某个类来查看所有div的宽度，选择max并将该类的宽度设置为该max。我知道如何做第二部分，但我有一个问题，即确定一个类的最大宽度。同一类的div位于不同的父div中，它们的id增加如下：div1，div2，div3 ......如果这有帮助的话。我知道这里有几个非常相似的问题，但是当div在位于不同的父div中时，我找不到基于类AND的答案。谢谢

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

working fiddle

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 with，之后您可以将该宽度赋予该类的所有元素。该解决方案将不再依赖于jQuery。

如何根据类来获得一组div的最大宽度？

4 个答案: