Jquery check attribute element value

Question

<li style="padding-bottom: 0px; display: none;">
<span> Content </span>
</li>

I want to test display == none

I got a solution with below script.

if($(this).closest('li').attr('style') =='padding-bottom: 0px; display: none;'){
    // script
}

any other easy way to record. Thanks

Answer 1

The problem is that you mix jQuery and vanilla JS methods here, with .attr().display. You are also trying to compare an entire string stylewith (if that worked) a single CSS rule.

The best way to achieve this would be to use the jQuery method is()along with the selector :visible. Try the following:

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

Answer 2

, , , none, css(). .attr('style'), .

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

}

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>

Hide result

Answer 3

: : :

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

: : is():

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

, "display" css():

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