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

为什么？

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>