jquery检查属性元素值[重复]答案

【问题标题】：jquery check the attribute element value [duplicate]jquery检查属性元素值[重复]
【发布时间】：2017-06-19 05:13:30
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

}

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

【讨论】：

【解决方案3】：

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

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

您可以使用 :visible 或 :hidden 选择器与 is():

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

最后可以用css()查看'display'的具体值：

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

【讨论】：