javascript - jQuery - 非表示の要素の幅を取得できないのはなぜですか?

Question

それぞれが隠し要素の幅を取得できないのはなぜですか?

私のコード:

.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>

結果：

<a>​one​&lt;/a>​
25
<a>​two​&lt;/a>​
26
<a>​one​&lt;/a>​
2
<a>​two​&lt;/a>​
2

しかし、私はそれがあるべきだと思った：

<a>​one​&lt;/a>​
25
<a>​two​&lt;/a>​
26
<a>​one​&lt;/a>​
25
<a>​two​&lt;/a>​
26

何か案は？これらの隠し要素の幅を取得するにはどうすればよいですか?

編集：

ここで隠し要素の幅を取得できます。

<a class="show">Hello World</a>
<a class="hidden">Hello World</a>

console.log($('.show').outerWidth(true));
console.log($('.hidden').outerWidth(true));

結果：

81
81

なんで？