如何找到内部元素的宽度

Question

我找不到任何其他问题同样的问题，虽然这可能是我的搜索措辞有问题。

我正在试图弄清楚如何找到包含固定宽度的容器div内所有元素的最大宽度。因此，在下图中，黑盒子是具有固定宽度的容器div。红色框表示容器div的内容，可能会发生变化。我想找到红色框的宽度，只使用js中的黑框。

这是一个jsfiddle与我一直在努力/尝试：

http://jsfiddle.net/w87k5/1/

我尝试过的当前jquery函数，没有成功：

.width();
.innerWidth();
.outerWidth();
.scrollLeft();

注意：我不知道有关此容器内容的任何内容。它们可以是任何html元素或混合的html元素，从div到imgs到iframe。我可以放一个没有固定宽度的“红色盒子”。黑盒的溢出将被隐藏。

更新：容器中可能有任意数量的子项。像这样：http://jsfiddle.net/w87k5/3/

更新2：我将对所有答案运行基准速度测试，以查看哪一个最快，然后选择一个。感谢您的所有投入！

基准： 我生成了1000个div，其随机宽度介于0和100之间，记录了Date（）。getTime（），进行了测试，然后再次记录了时间。结果如下：

平均值~2418 for循环的长度为毫秒。我可能会以某种方式搞砸了这个？

for (var i = 1; i <= count; i++){
        var q = $("#box :nth-child(" + i + ")").width();
        if(q > box){
            box = q;
        }
    }

平均~34.4 .each循环的ms。

平均值~22.4。 .map函数的ms。 （选择回答。）

Answer 1

获取子项数，并循环以获取每个

的宽度

     $(document).ready(function () {
       var count = $("#box").children().length;
       var h = 0;

       for (var i = 1; i <= count; i++) {
           max = $("#box :nth-child(" + i + ")").width();
           var h = Math.max(max, h);
       }
           alert(h);
   });

http://jsfiddle.net/JDVN3/1/

请注意，索引从1开始而不是0。

退房：http://api.jquery.com/nth-child-selector/

Answer 2

如果您需要所有嵌套元素，可以使用*选择器进行搜索，该选择器将返回所有后代元素：

var widthArray=$('#box *').map(function(){
   return $(this).outerWidth();
}).get();

var maxWIdth= Math.max.apply(Math, widthArray);

对于小孩子：

var widthArray=$('#box').children().map(function(){....

Answer 3

您可以使用.each()循环浏览每个子元素。

jsFiddle example

var widths = [];
$('#box').children().each(function(i){
    widths[i] = $(this).width();
});
alert(Math.max.apply(Math, widths));

将返回宽度最大的子元素的宽度。