Various ways to determine whether an element is hidden in jquery_jquery

The first way: using CSS properties

Copy code The code is as follows:

var display =$('#id').css('display');
if(display == 'none'){
alert("You discovered me, I am hiding!");
}

Second: Use jquery built-in selector

Suppose our page has such a tag,

Copy code The code is as follows:

For testing only

Then, we can use the following statement to determine whether the tag with the id "test" is hidden:

Copy code The code is as follows:

if($("#test").is(":hidden")) {...} //The premise is that the jQuery library has been imported

In this way, we can easily determine whether an element is hidden and animate it according to its status, such as:

Copy code The code is as follows:

if($("#test").is(":hidden")){
         $("#test").show();                                                                                                                                                                                 //If the element is hidden, show it
}else{
        $("#test").hide();            //If the element is visible, hide it
}

jQuery determines whether an element is displayed or hidden

Copy code The code is as follows:

var node=$('#id');

The first way of writing

Copy code The code is as follows:

if(node.is(':hidden')){ //If node is hidden, display the node element, otherwise hide it

node.show();

}else{

node.hide();

}

The second way of writing

Copy code The code is as follows:

if(!node.is(':visible')){ //If node is hidden, display the node element, otherwise hide it

node.show();

}else{

node.hide();

}

if(node.is(':visible')){ //If node is displayed, hide the node element, otherwise display

node.hide();

}else{

node.show();

}

jQuery determines whether an object is shown or hidden

Js code

Copy code The code is as follows:

// jQuery("#tanchuBg").css("display")
// jQuery("#tanchuBg").is(":visible")
// jQuery("#tanchuBg").is(":hidden")

Js code

Copy code The code is as follows:

$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false]

Js code

Copy code The code is as follows:

$('element:hidden')
$('element:visible')

Js code

Copy code The code is as follows:

$(".item").each(function()
{
If ($(this).css("visibility") == "hidden")
{ 
// handle non visible state
}  
else else
{ 
// handle visible state
}  
})

Js code

Copy code The code is as follows:

ar isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Js code

Copy code The code is as follows:

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

/* your code here*/
}
else{

/* alternate logic */
}