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>

jQuery - 为什么每个都不能获取隐藏元素的宽度？

jQuery - why each can't get the width of hidden elements?

javascript

css

each

outerwidth