如何找到内部元素的宽度
我找不到任何其他问题同样的问题,尽管这可能是我的搜索措辞的问题。
我试图找出如何找到具有固定宽度的容器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 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); });
请注意,索引从1开始而不是0。
查看: http : //api.jquery.com/nth-child-selector/