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​</a>​
25
<a>​two​</a>​
26
<a>​one​</a>​
2
<a>​two​</a>​
2

Но я думал, что это должно быть:

<a>​one​</a>​
25
<a>​two​</a>​
26
<a>​one​</a>​
25
<a>​two​</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

Зачем?

Answer 1

Вы можете сделать что-то действительно взломанное, клонируя и отключая видимость. Как только он был вставлен в DOM, мы удаляем его после того, как ширина была взята.

var appHook = $('body');

$(".navbar-items > li > a").each(function(index) {
  var element = $(this).clone();
  element.css({ visibility: 'hidden' });
  appHook.append(element);
  console.log(element.outerWidth());
  element.remove();
});

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