How get size of element with hidden parent?

Question

1.4.4 return size of hidden element, but what about element in another hidden element? Is there any better solution then getWidth?

    <script type="text/javascript">
        function getWidth(element){
            var parent = element.parent();
            $('body').append(element);
            var width = element.width();
            parent.append(element);
            return width;
        }

        $(function(){
            var width = $("#foo").width(); 
            console.log(width); //0
            width = getWidth($("#foo"));
            console.log(width); //ok
        });
    </script>
    <div style='display:none'>
        <div style='display:none' id='foo'>bar</div>
    </div>

Answer 1

When elements are hidden, their width may vary depending on your styling. And when a hidden element is inside another hidden element, results could vary again. However, the Jquery code is quite straightforward:

$('#foo').parent().width()

This will grab foo's parent div, then grab its width, but I can't guarantee it will get the element's unhidden natural width. Hope that helps!