Question

jQuery文档说出以下内容：

如果元素占用文档中的空间，则认为元素是可见的。可见元素的宽度或高度大于零。

但是以下代码似乎没有遵循该规则。我有一个高度为0的列表，我正在最后一个可见列表中搜索一个项目，但是仍然选择了高度为0的列表。

有哪些方法可以选择高度大于0的项目？

更新

隐藏类在我的项目中以其他方式应用。我无法访问切换高度的类，这就是我需要检查高度的原因。

注意：在下面的代码中，我知道重叠的文本。我把它留在那里证明高度为0的列表仍然被选中。

// Attempt 1
// var $focusItem = $('ul:visible').find('li:last').find('a');

// Attempt 2
var $focusItem = $($('ul').not('ul[style*="height: 0"]')).find('li:last').find('a');

$focusItem.focus();

.hidden {
  height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#">Button 1 </a>
    <ul>
      <li>
        <a href='#'>Link</a>
        <ul>
          <li> <!-- li:last -->
            <a href="#">Focus Me</a> <!-- desired focused item -->
          </li>
        </ul>
      </li>
      <li>
        <ul class="hidden">
          <li>
            <a href="#">Don't Focus Me</a>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="hidden">
      <li>
        <a href='#'>Don't Focus me</a> <!-- actual focused item -->
      </li>
    </ul>
  </li>
</ul>

Answer 1

我不知道为什么jquery可以工作，但你可以做的是使用过滤器：

$focusItem = $("ul").filter(function() {
return $(this).height() >0 ;
}).find('li:last').find('a');

P.S。如果你有一个内联样式，带有'style'的选择器就可以工作。

Answer 2

根问题是您的选择器$('ul').not('ul[style*="height: 0"]')将获得所有li，因为您的第一个ul可见

更新

您可以执行类似

的操作

http://jsfiddle.net/4dhqhe82/1/

$focusItem = $("ul ul > li > ul").filter(function () {
    return $(this).height() > 0;
}).find('li:last').find('a');

同样，这不是很强大，但适用于您当前的代码。如果你可以在html结构中添加一两个类，那么这将使这更容易

高度为0的元素仍被视为可见。有替代解决方案吗？

2 个答案: