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

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

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

display of container div and larger div inside

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

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

текущие функции JQuery Я пытался, но безуспешно:

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

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

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

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

Benchmarks: Я создал 1000 div со случайной шириной между 0 и 100, записал 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 сред. ms для цикла .each.

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

источник

2013-12-25 James G.

Нравится? http://jsfiddle.net/JoshC/w87k5/2/ –

@JoshC, который вернет только первое дочернее значение, любой получатель jQuery, работающий над коллекцией, возвращает только первый – charlietfl

Aw, вы получили мои надежды (в то же время заставляя меня чувствовать себя немым). Чарлифл прав, я думаю, что это не сработает. –

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

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

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

Для всего детей:

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

источник

2013-12-25 00:18:55 charlietfl

Uncaught TypeError: Object [object Object] не имеет метода 'outerwidth' ??? –

ooops typo отсутствовал капитал на 'W' ... работает здесь http://jsfiddle.net/w87k5/5/ – charlietfl

Я сравнивал ответы, этот, безусловно, самый быстрый, и именно поэтому я его выбрал. (См. Приведенные выше тесты). –

Получить количество детей, и цикл через, чтобы получить ширину каждого

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

источник

2013-12-25 00:15:18 NEO

Первый возвращает длинную ошибку, а второй проверяет только второго ребенка. Хотя я мог бы перебирать детей, это не идеально. –

$ ("# parentselector"). Children(). Length; получить число дочерних элементов, а затем использовать эту переменную вместо 2 .. – NEO

Возможно, вы захотите проверить эту скрипту - она не отражает кодировку, которую вы используете. –

Вы можете использовать .each() для цикла, хотя каждый дочерний элемент.

jsFiddle example

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

Который возвращает ширину дочернего элемента с наибольшей шириной.

источник

2013-12-25 00:24:58

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

ответ

Смежные вопросы