Can JQuery each function be used on DOM objects that are hidden?

Question

I am trying to find the total outer width of all "li" elements in a menu but my code don't seem to work so I am wondering is it because the parent UL element is set to display none?

If so how to get around this?

<ul>
<li>menu item 1</li>
<li>menu item 2<ul>
     <li>sub menu item 1</li>
     <li>sub menu item 2</li>
</ul></li>
</ul>

So obviously my sub menu item is set to display none until it is hovered over.

And my JS is like this

var totalWidth = 0;
jQuery("ul ul li").each(function() {
     totalWidth += jQuery(this).outerWidth();
});
alert(totalWidth);

When I alert this, it is always zero...

Either it is not selecting them because they are hidden, or their width is 0 because they are hidden. Try using using a string and adding jQuery(this).text() inside the each, and alert it after. If it is still blank, I suggest AndreasAL's solution below. If it is not blank, I suggest AndreasAL's solution below. — yoozer8, Oct 11 '11 at 21:19
http://stackoverflow.com/questions/1472303/jquery-get-width-of-element-when-not-visible-display-none — aziz punjani, Oct 11 '11 at 21:28

Andreas Louv · Accepted Answer · 2011-10-11T22:21:29.153

1

Anyway you can hack your way out of it...:

var totalWidth = 0;
jQuery("ul ul").show();
jQuery("ul ul li").each(function() {
     totalWidth += jQuery(this).outerWidth();
});
jQuery("ul ul").hide();
alert(totalWidth);

Not sure you have hidden the ul ul selector but see the system?

Some CSS hacks maybe:

http://jsfiddle.net/ywtBH/

http://jsfiddle.net/ywtBH/2/

http://jsfiddle.net/ywtBH/5/

After chat:

The solution was to put white-space:none; and... See: http://jsfiddle.net/dGhAp/2/

With float:left;

--- PARENT ---------------------
|------------------------       |
|   elem1   |   elem2   |       |
|           |           |       |
|           |           |       |
-------------------------
    elem3   |
            |
            |
-------------

With display:inline-block;

--- PARENT ---------------------
|-------------------------------|---
|   elem1   |   elem2   |elem3  |   |
|           |           |       |   |
|           |           |       |   |
------------------------------------

edited Oct 11 '11 at 22:21

answered Oct 11 '11 at 21:15

Andreas Louv

46,145
13
104
123

Hmmm not sure if that is the best way...because then you would have a flash of the menu open on load...And I am not sure if my question is true or not of whether jQuery can't determine the width of elements if they are hidden. – Oct 11 '11 at 21:18
Ok sorry. Thought something else was written in a comment? You can loop throw hidden elements with `$(selector).each` but you can't calculate the `width()` or `outerWidth()` of hidden elements. – Andreas Louv Oct 11 '11 at 21:20
Another way to hack it. Is to move your list -x pixels to the left calculate and then re-place it again. – Andreas Louv Oct 11 '11 at 21:23
Thx for the solution but perhaps I should mention why I am trying to do this. I want the sub menu to span left to right on hover instead of vertically up and down...So I set the sub Li elements to float:left but funny thing is, after the 2nd item, the 3rd will drop to the bottom below the 1st item even though LI is set to float:left...So that forces me to explicitly set a width on the parent UL which works. However, it now becomes non-dynamic because what if i have less menu items, then I have to change the UL width again...See my point? Perhaps there is a better CSS way? – Oct 11 '11 at 21:28
Think we can make it with css: This: http://jsfiddle.net/ywtBH/ OR http://jsfiddle.net/ywtBH/2/ OR http://jsfiddle.net/ywtBH/5/ – Andreas Louv Oct 11 '11 at 21:38
Yes like your first one...strange...I have similar code but it is not working on my end...hence I am here stumped... – Oct 11 '11 at 21:39
do you have some fixed with on you outer UL? In that case use `width:auto;` on the inner UL -> `ul ul` - And just for information: In newer browser that support use of the pseudo class :hover on li elements. You can do like this: http://jsfiddle.net/ywtBH/6/ (no JS required) – Andreas Louv Oct 11 '11 at 21:45
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/4178/discussion-between-andreasal-and-rick) – Andreas Louv Oct 11 '11 at 21:48
very strange...can't figure this out...I have ul set to absolute and ul ul li set to float:left and they are not being floated left...Not sure if because i have anchors in there making a difference... – Oct 11 '11 at 21:49

score 0 · Answer 2 · answered Oct 11 '11 at 21:24

The issue isn't the enumeration but the fact that outerWidth returns zero for all of the enumerated elements because they are not displayed.

If you can change the way you hide your UL element to use visibility: hidden instead of display: none then outerWidth should return an actual width, which would solve your problem.

score 0 · Answer 3 · answered Oct 11 '11 at 21:24

What is this function for? You coudl position the menu items off the screen using something like top: 999999px so the user doesn't see it but its hidden. By doing that jquery can pick out the width. Part of your hover event would be to set/remove the top style so that its positioned as expected.

Can JQuery each function be used on DOM objects that are hidden?

3 Answers3