The page has a lot of <li> tags, how to get these are hidden, these are displayed;

1. Requirements: suppose the page has a hundred li tags with two states, one is hidden (display:none), the other is displayed on the page (display:block);

2. Question: I want to get the quantity hidden and displayed. Can I traverse it directly?

3. Additional conditions: the company"s requirements are more complex, so there are many possibilities for li tags to hide. If you add a class name to the hidden one, then many possibilities need to add a class name. So do you want to find out whether there are li tags for display:none and display:block by directly traversing the page?

Javascript typescript html5 html sass

Jul.21,2021

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

}
})

you can make a distinction when rendering li

html

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

jq get quantity

//li
$("li[dp=no]").length
//li
$("li[dp!=no]").length

if you don't want to add class or attributes, just traverse li and make a judgment

var li_dp_no = 0;
var li_dp_block = 0;

$("li").each(function(){
    if($(this).css("display")=="none")){
        li_dp_noPP;
    }else{
        li_dp_blockPP;
    }
});

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

notice that the spaces around the middle colon should be consistent
and this is the attr written in html. If it is the default display: block, it cannot be selected

Jquery css function usage (to determine whether a tag has an attribute) to determine whether a layer is hidden: ("- sharpid"). Css ("display") = "none;

each traverse to determine whether the current element display attribute = = none | block the number is increasing


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

Previous: Chrome 69.0.3497.100 (official version) (64-bit) fake death

Next: Why can't I output exports = {aRom 1} in node.js?