如何找到内部元素的宽度

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 个随机宽度在 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 循环的毫秒数。

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

Answer 1

获取children的个数，循环遍历得到每个children的宽度

     $(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

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

jsFiddle example

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

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

Answer 3

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

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

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

仅适用于儿童：

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