• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 268
  • Last Modified:

Get the combined width of multiple siblings (code optimization)

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();

Open in new window


While this works, I am just wondering whether this code could be optimized or shortened. Any tips or tricks? Thanks.
1 Solution

It looks pretty tight but you could use:


which is the fastest way to get the li descendants of ul to a single level.
Johan85Author Commented:
@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

Open in new window

Gurvinder Pal SinghCommented:
why not innerwidth of the 'ul' only??



Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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');

Open in new window

Johan85Author Commented:
@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.
Gurvinder Pal SinghCommented:
<< In this particular case the width of the wrapping ul was not usable>>
Why is that ??
Johan85Author Commented:
@gurvinder: Because I need to set another explicit width to it for layout purposes.
Gurvinder Pal SinghCommented:
width and innerWidth are different
Johan85Author Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now