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

你可以通过克隆和关闭可见性来做一些真正的hacky。将它插入DOM后，我们会在宽度取出后将其删除。

＆＃13;

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();
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

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

＆＃13;

jQuery - 为什么每个都无法获得隐藏元素的宽度？

1 个答案: