如何找到内部元素的宽度

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

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

显示容器div和更大的div里面

这是一个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 avg。 for循环的长度为毫秒。 我可能会以某种方式弄乱这一个?

 for (var i = 1; i  box){ box = q; } } 

平均约34.4 .each循环的ms。

~22.4平均 .map函数的ms。 (选择回答。)

如果需要所有嵌套元素,可以使用* selector进行搜索,这将返回所有后代元素:

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

对于小孩子:

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

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

jsFiddle示例

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

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

获取子项数,并循环获取每个子项的宽度

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