Solved

# Get the combined width of multiple siblings (code optimization)

Posted on 2011-09-08
229 Views
I need to calculate the combined width of multiple list items and in this case I cannot rely on the width of the ul wrapper.

So, I came up with a loop in jQuery. It works.

var \$items = \$('ul').find('li');
var total_width = 0;

// Loop over each item and add widths up
\$items.each(function() {
total_width += \$(this).outerWidth();
});

jsfiddle

While this works, I am just wondering whether this code could be optimized or shortened. Any tips or tricks? Thanks.
0
Question by:Johan85

LVL 20

Expert Comment

It looks pretty tight but you could use:

\$('ul>li');

which is the fastest way to get the li descendants of ul to a single level.

0

LVL 1

Author Comment

@Proculopsis: Okay, thanks. I was thinking more about an optimization to the loop, though.

Note: in my real code I'm using an id selector. In that case I've learned that the find() function is slightly faster than combining the selectors.

\$('#id > .child');
\$('#id').find('> .child'); // faster
0

LVL 40

Expert Comment

why not innerwidth of the 'ul' only??

\$("ul").innerWidth();

http://api.jquery.com/innerWidth/

0

LVL 82

Accepted Solution

leakim971 earned 250 total points
for example : http://jsfiddle.net/4aqvM/

var x1 = \$('ul>li:first');
var x2 = \$('ul>li:last');
total_width = x2.position().left - x1.position().left + x2.outerWidth();

\$('ul').after('<br>Total li’s width = '+ total_width +'px');
0

LVL 1

Author Comment

@gurvinder372: In this particular case the width of the wrapping ul was not usable.

@leakim971: Nice thinking. While not necessarily more beautiful, in my opinion, you managed to get rid of the loop.
0

LVL 40

Expert Comment

<< In this particular case the width of the wrapping ul was not usable>>
Why is that ??
0

LVL 1

Author Comment

@gurvinder: Because I need to set another explicit width to it for layout purposes.
0

LVL 40

Expert Comment

width and innerWidth are different
0

LVL 1

Author Closing Comment

Thanks
0

## Featured Post

### Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…