使用jQuery检查，如果元素是'显示:none'或者点击时阻塞

我想检查和排序隐藏的元素。是否有可能找到所有具有属性display和值none的元素?

763212 次浏览
小开
最佳答案

你可以用:可见表示可见元素，用:隐藏表示隐藏元素。这个隐藏元素的display属性设置为none。

hiddenElements = $(':hidden');
visibleElements = $(':visible');

检查特定元素。

if($('#yourID:visible').length == 0)
{


}

如果元素占用文档中的空间，则认为它们是可见的。 可见元素的宽度或高度大于零， 参考 < / p >

你也可以在:visible中使用是()

if(!$('#yourID').is(':visible'))
{


}

如果你想检查显示的值，你可以使用css ()

if($('#yourID').css('display') == 'none')
{


}

如果你正在使用以下显示值display可以有。

显示:没有

显示:内联

显示:块

显示:列表项

显示:inline-block

检查可能的display值的完整列表。

使用JavaScript检查显示属性

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none";
小开 
$('#selector').is(':visible');
小开 
$("element").filter(function() { return $(this).css("display") == "none" });
小开

是的，你可以使用cssfunction。下面将搜索所有div，但你可以修改它为任何你需要的元素

$('div').each(function(){


if ( $(this).css('display') == 'none')
{
//do something
}
});
小开

jQuery中有两个方法来检查可见性:

$("#selector").is(":visible")

而且

$("#selector").is(":hidden")

你也可以在选择器中根据可见性执行命令;

$("#selector:visible").hide()

或

$("#selector:hidden").show()
小开

使用这个条件:

if (jQuery(".profile-page-cont").css('display') == 'block'){
// Condition
}
小开

只是我个人更喜欢的另一个快捷方式，而不是。is()或。length:

if($('.myclass:visible')[0]){
// is visible
}

如果没有为选择器.myclass:visible找到dom元素，它将只返回undefined

小开

现场演示

<div id="div" style="display: none"></div>
<button class="try">Try now</button>


<script type="text/javascript">
$(document).on('click','.try',function() {
var style = $('#div');
if (style.css("display") == "none") {
alert("display not available");
}
});
</script>

提交答案