How do I find an element with a specific class and CSS style using jQuery?

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.

Please indent code when pasting it into a question; it makes it far easier to read that way. — David Thomas
– David Thomas, Commented Mar 3, 2017 at 20:23
$('.class1 .class2 .class3 .class4').find( '.class5').filter(':visible') — bassxzero
– bassxzero, Commented Mar 3, 2017 at 20:27

David Thomas · Accepted Answer · 2017-03-03 20:30:55Z

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:

Choo Hwan · Accepted Answer · 2017-03-03 20:27:09Z

0

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

answered Mar 3, 2017 at 20:27

Choo Hwan

4163 silver badges12 bronze badges

Comments

empiric · Accepted Answer · 2017-03-03 20:27:59Z

0

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

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

Example

answered Mar 3, 2017 at 20:27

empiric

7,8767 gold badges40 silver badges51 bronze badges

Comments

CaptainHere · Accepted Answer · 2017-03-03 20:29:56Z

0

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

answered Mar 3, 2017 at 20:29

CaptainHere

6886 silver badges14 bronze badges

Comments

Jorge Mejia · Accepted Answer · 2017-03-03 20:30:14Z

0

You can do it directly

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

answered Mar 3, 2017 at 20:30

Jorge Mejia

1,1611 gold badge11 silver badges28 bronze badges

Comments

kind user · Accepted Answer · 2017-03-03 20:32:54Z

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>

Sudhanshu Jain · Accepted Answer · 2017-03-03 20:44:52Z

0

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';
               });

answered Mar 3, 2017 at 20:44

Sudhanshu Jain

5343 silver badges11 bronze badges

Collectives™ on Stack Overflow

How do I find an element with a specific class and CSS style using jQuery?

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related