CODEWITHSUNDEEP
javascriptjquery
user972418
user972418

Reputation: 827

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

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.

Upvotes: 0

Views: 112

Answers (7)

Sudhanshu Jain
Sudhanshu Jain

Reputation: 534

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

Upvotes: 0

kind user
kind user

Reputation: 41893

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>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 1

Jorge Mejia
Jorge Mejia

Reputation: 1163

You can do it directly 

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

Upvotes: 0

CaptainHere
CaptainHere

Reputation: 698

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

Upvotes: 0

empiric
empiric

Reputation: 7878

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

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

Example

Upvotes: 0

Choo Hwan
Choo Hwan

Reputation: 416

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

Upvotes: 0

Related Questions