Solved

Get the combined width of multiple siblings (code optimization)

Posted on 2011-09-08
9
234 Views
Last Modified: 2012-08-14
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


jsfiddle

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

Expert Comment

by:Proculopsis
ID: 36501520

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

by:Johan85
ID: 36501536
@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

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36501677
why not innerwidth of the 'ul' only??

$("ul").innerWidth();

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

0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 36501716
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

0
 
LVL 1

Author Comment

by:Johan85
ID: 36501744
@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

by:gurvinder372
ID: 36501762
<< In this particular case the width of the wrapping ul was not usable>>
Why is that ??
0
 
LVL 1

Author Comment

by:Johan85
ID: 36501768
@gurvinder: Because I need to set another explicit width to it for layout purposes.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36501803
width and innerWidth are different
0
 
LVL 1

Author Closing Comment

by:Johan85
ID: 36585325
Thanks
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
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…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question