Как найти ширину внутренних элементов

Я не мог найти никаких других вопросов, задающих одно и то же, хотя это может быть проблемой с моей фразой поиска.

Я пытаюсь выяснить, как найти наибольшую ширину всех элементов, содержащихся внутри контейнера div с фиксированной шириной. Таким образом, на изображении ниже черный ящик является контейнером div с фиксированной шириной. Красное поле представляет содержимое контейнера div, которое может быть изменено. Я хочу найти ширину красного ящика, используя только черный ящик в js.

отображение контейнера div и более крупного div внутри

Вот jsfiddle с тем, над чем я работал / пытаюсь:

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

текущие функции jquery, которые я пробовал, без успеха:

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

Примечание. Я ничего не знаю о содержимом этого контейнера. Они могут быть любым элементом html или соединением элементов html, от divs до imgs до iframes. Я мог бы поставить «красный ящик» без фиксированной ширины. Переполнение черного ящика будет скрыто.

Обновление: в контейнере может быть любое количество детей. Вот так: http://jsfiddle.net/w87k5/3/

Обновление 2: Я собираюсь запустить тесты скорости тестирования по всем ответам, чтобы узнать, какой из них самый быстрый, и выберите один после этого. Спасибо за все Ваши ответы!

Тесты: я создал 1000 div со случайной шириной между 0 и 100, записал Date (). GetTime (), выполнил тест, а затем снова записал время. Вот результаты:

~ 2418 сред. миллисекунды с циклом for для длины. Возможно, я как-то испортил это?

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

~ 34,4 сред. ms для цикла .each.

~ 22,4 сред. ms для функции .map. (Выбранный ответ.)

Если вам нужно, чтобы все вложенные элементы могли искать с помощью * селектора, который будет возвращать все последующие элементы:

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

Для детей:

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

Вы можете использовать .each() для циклического .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/