Why is it difficult to obtain the width of hidden elements?
Here is my code:
.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<ul class="navbar-items">
<li><a>one</a></li>
<li><a>two</a></li>
</ul>
<ul class="navbar-items hidden">
<li><a>one</a></li>
<li><a>two</a></li>
</ul>
<script type="text/javascript">
$(".navbar-items > li > a").each(function(index) {
console.log(this);
var thisWidth = $(this).outerWidth(true);
console.log(thisWidth);
});
</script>Result:
<a>one</a>
25
<a>two</a>
26
<a>one</a>
2
<a>two</a>
2
Expected result:
<a>one</a>
25
<a>two</a>
26
<a>one</a>
25
<a>two</a>
26
Any suggestions on how to get the width of these hidden elements?
UPDATE:
I managed to retrieve the width of the hidden element by doing this:
<a class="show">Hello World</a>
<a class="hidden">Hello World</a>
console.log($('.show').outerWidth(true));
console.log($('.hidden').outerWidth(true));
Result:
81
81
How come?