如何使用jQuery查找具有特定类和CSS样式的元素？

Question

Here is what the code looks like:

<div class='class1'>
  <div class='class2'>
    <div class='class3'>
      <div class='class4'>
        <div class='class5'>
          <p>Some text 1</p>
        </div>
      </div>


      <div class='class4'>
        <div class='class5'>
          <p>Some text 1</p>
        </div>
      </div>


      <div class='class4'>
        <div class='class5' style="display:block;">
          <p>Some text 1</p>
        </div>
      </div>


      <div class='class4'>
        <div class='class5'>
          <p>Some text 1</p>
        </div>
      </div>
    </div>
  </div>
</div>

I want to get the div with class5 and CSS property display set to block . Once I have this div I want to perform further action on that div . I tried using something like

$('.class1 .class2 .class3 .class4').find( '.class5').is(':visible')

but it doesn't work.

Answer 1

The problem you have is that is() returns a Boolean, reflecting whether the passed-in element (or the first of the passed-in elements) matches the supplied argument.

If you switch to filter() , which filters the passed-in collection according to the supplied argument; if the element matches then that element is retained, otherwise it's discarded:

 let classFiveElems = $('.class1 .class2 .class3 .class4 .class5').filter( ':visible'); console.log(classFiveElems); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='class1'> <div class='class2'> <div class='class3'> <div class='class4'> <div class='class5'> <p>Some text 1</p> </div> </div> <div class='class4'> <div class='class5'> <p>Some text 1</p> </div> </div> <div class='class4'> <div class='class5' style="display:block;"> <p>Some text 1</p> </div> </div> <div class='class4'> <div class='class5'> <p>Some text 1</p> </div> </div> </div> </div> </div> 

What you want, though, is not just a simple check for visibility; but a test for a specific CSS property; so I'd suggest the following, which uses filter() but using the anonymous function:

 let classFiveElems = $('.class1 .class2 .class3 .class4 .class5').filter(function() { return this.style.display === 'block'; }).addClass('found'); console.log(classFiveElems); 

 .found { color: #f90; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='class1'> <div class='class2'> <div class='class3'> <div class='class4'> <div class='class5'> <p>Some text 1</p> </div> </div> <div class='class4'> <div class='class5'> <p>Some text 1</p> </div> </div> <div class='class4'> <div class='class5' style="display:block;"> <p>Some text 1</p> </div> </div> <div class='class4'> <div class='class5'> <p>Some text 1</p> </div> </div> </div> </div> </div> 

References:

• filter() .
• find() .
• is() .

Answer 2

As example:

if($('.class1 .class2 .class3 .class4')
           .find( '.class5:first')
              .is(':visible')){
  console.log('yes');
}

See: https://jsbin.com/ninovic/edit?html,js,console,output

Answer 3

Actually every div with class5 class has a display: block property.

display: block property is a default state of every block element ( divs are block elements).

I've set the display property of other divs to none , just to show functionality of following code.

 $('div').each(function() { if ($(this).hasClass('class5') && $(this).is(":visible")) { console.log($(this).html()); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='class1'> <div class='class2'> <div class='class3'> <div class='class4'> <div class='class5' style="display:none;"> <p>Some text 1</p> </div> </div> <div class='class4'> <div class='class5' style="display:none;"> <p>Some text 2</p> </div> </div> <div class='class4'> <div class='class5' value='t' style="display:block;"> <p>Some text 3</p> </div> </div> <div class='class4'> <div class='class5' style="display:none;"> <p>Some text 4</p> </div> </div> </div> </div> </div> 

Answer 4

.is() returns a boolean, you can use the pseudo-selector inside find() to select the element:

$('.class1 .class2 .class3 .class4').find('.class5:visible')

Example

Answer 5

$('.class5').each(function(){
  if ($(this).is(":visible")) {
   //What you want to do  
   }
});

Answer 6

你可以直接做

alert('is visible?', $( '.class5').is(':visible'));

Answer 7

This will return the .class5 having display:block property. IN Your case it will return all the elements. because all div in div contains default display property block, So it will return all of them in your case. and if you try then you have assure that only the elements(.class5) you want to select have display block property.

 var selector = $('.class1 .class2 .class3 .class4').find( '.class5').filter(function() {
                  return $(this).css('display') == 'block';
               });