javascript - 如何找到内部元素的宽度

Question

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

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

这是我一直在努力/尝试的 jsfiddle:

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

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

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

注意:我对这个容器的内容一无所知。它们可以是任何 html 元素或 html 元素的组合，从 div 到 imgs 再到 iframe。我可以在周围放置一个没有固定宽度的“红色盒子”。溢出的黑框会被隐藏。

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

更新 2:我将对所有答案运行基准速度测试，看看哪个是最快的，然后选择一个。感谢您的所有意见!

基准: 我生成了 1000 个随机宽度介于 0 和 100 之间的 div，记录了 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

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

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

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

对于 child :

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