CODEWITHSUNDEEP
javascriptjqueryhtmlcsswidth
James G.
James G.

Reputation: 2904

How to find width of inner elements

I couldn't find any other questions asking the same thing, though that may be a problem with my search phrasing.

I'm trying to figure out how to find the largest width of all elements contained inside of a container div with a fixed width. So, in the image below, the black box is the container div with a fixed width. The red box represents the contents of the container div, which are subject to change. I want to find the width of the red box, using only the black box in js.

display of container div and larger div inside

Here is a jsfiddle with what I've been working on/trying:

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

the current jquery functions I've tried, with no success:

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

Note: I do not know ANYTHING about the contents of this container. They could be any html element or mix of html elements, from divs to imgs to iframes. I could put a "red box" without a fixed width surrounding them. Overflow of the black box will be hidden.

Update: There could be any number of children in the container. Like this: http://jsfiddle.net/w87k5/3/

Update 2: I'm going to run benchmark speed tests on all of the answers to see which one is the fastest, and select one after that. Thanks for all your input!

Benchmarks: I generated 1000 divs with a random width of inbetween 0 and 100, recorded the Date().getTime(), did the test, then recorded time again. Here are the results:

~2418 avg. milliseconds with the for loop for length. I might have messed this one up somehow?

for (var i = 1; i <= count; i++){
        var q = $("#box :nth-child(" + i + ")").width();
        if(q > box){
            box = q;
        }
    }

~34.4 avg. ms for the .each loop.

~22.4 avg. ms for the .map function. (Chosen answer.)

Upvotes: 1

Views: 1279

Answers (3)

NEO
NEO

Reputation: 2001

Get the number of children, and loop through to get the width of each

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

Please not that the index starts from 1 and not 0.

Check out: http://api.jquery.com/nth-child-selector/

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240928

You could use .each() to cycle though each child element.

jsFiddle example

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

Which will return the width of the child element with the largest width.

Upvotes: 2

charlietfl
charlietfl

Reputation: 171669

If you need all nested elements can search with * selector which will return all descendent elements:

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

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

For just children:

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

Upvotes: 2

Related Questions