页面有很多<li>标签,怎么获取到这些是隐藏的,这些是显示的;

Question

1.需求: 假设页面有一百个li标签,有两种状态,一种是隐藏的(display:none),一种是显示在页面的(display:block);

2.问题: 我想获取隐藏的数量和显示的数量,能否直接遍历到?

3.附加条件: 公司的需求比较复杂,让li标签隐藏有很多种可能性,如果给隐藏的添加一个类名的话,那么那么多种可能性都要放添加类名的方法.所以想求解是否有直接遍历页面筛选出display:none的和display:block的li标签?

Answer 1

$('li[style*="display: none"]').length
$('li[style*="display: block"]').length

要注意中间冒号左右的空格 要保持一致
而且这个是写在html里的attr 如果是默认display: block是选不了的

Answer 2

$("li").each(function(index){
if($(this).css('display')=='none'){

}
})

Answer 3

可以在渲染li的时候就做区分

html

<li data-dp="no">
<li>
<li data-dp="no">

jq获取数量

//隐藏的li
$("li[dp=no]").length
//不隐藏的li
$("li[dp!=no]").length

如果不想加class 或者属性，直接遍历li并作判断

var li_dp_no = 0;
var li_dp_block = 0;

$("li").each(function(){
    if($(this).css("display")=="none")){
        li_dp_no++;
    }else{
        li_dp_block++;
    }
});

Answer 4

Jquery css函数用法(判断标签是否拥有某属性) 判断一个层是否隐藏: ("#id").css("display")="none;

Answer 5

each遍历 判断当前元素display属性是否==none || block 数量递增

var isBlockNum = 0,isNoneNum = 0
$("li").each(function(index){
    if($(this).css('display')=='none'){
        isNoneNum++
    }else if($(this).css('display')=='block'){
        isBlockNum++
    }
})