Question

<li style="padding-bottom: 0px; display: none;">
<span> Content </span>
</li>

我想查看display == none

我通过以下脚本获得了解决方案。

if($(this).closest('li').attr('style') =='padding-bottom: 0px; display: none;'){
    // script
}

任何其他简单的写作方式。感谢

Answer 1

你遇到的问题是你在这里混合使用jQuery和vanilla JS方法.attr().display。您还尝试将整个style字符串与（如果有效）一个CSS规则进行比较。

实现这一目标的更好方法是使用jQuery的is()方法以及:visible选择器。试试这个：

if ($(this).closest('li').is(':visible')) {
  // script
}

Answer 2

如果您只想检查元素是否隐藏，可以使用 css() 方法检查显示是否设置为无。使用.attr('style')它将返回元素上的整个样式。

if($(this).closest('li').css('display') == 'none' ){

}

工作demonstrative示例（我将内联样式仅用于演示，但我不建议您使用它）：

$('li').each(function(i) {
  if ($(this).css('display') == 'none') {
    console.log(i); // logs the indexes of the hidden elements
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li style="padding-bottom: 0px; display: none;">
  <span> Content </span>
</li>
<li style="padding-bottom: 0px; display: none;">
  <span> Content </span>
</li>
<li style="padding-bottom: 0px;">
  <span> Content </span>
</li>

Answer 3

您可以直接使用：visible或：hidden选择器：

if ( $('li:visible').length > 0 ) {
    // it is visible
}

您可以使用{visible或：隐藏选择器is()：

if ( $('li').is(':visible') ) {
    // it is visible
}

最后，您可以查看＆＃39;显示＆＃39;的具体值。与css()：

if ( $('li').css('display') === 'none' ) {
    // it is hidden
}

jquery检查属性元素值

3 个答案: