neethu neethu - 5 months ago 6
jQuery Question

Is it possible to check whether the first div ,among a set of div having same class,have the display block attribute

I need to check whether the first div, among a set of div having same class, have the

display:block
attribute? How can I accomplish this with jQuery?

html code is like:

<div id="bb-bookblock" class="bb-bookblock bb-vertical" >

<div class="bb-item" style="display: block;"> </div>
<div class="bb-item" style="display: none;"> </div>
<div class="bb-item" style="display: none;"> </div>
<div class="bb-item" style="display: none;"> </div>
<div class="bb-item" style="display: none;"> </div>
<div class="bb-item" style="display: none;"> </div>
</div>


Here the 6 div in 'bb-bookblock' div having class name ="bb-item". I need to know how can I check whether currently which child div having the attribute display:block

Answer

You can get the display by using .css('display'):

To get the first item, you can either use .eq(0) or a .first() or a first child selector

console.log($('#bb-bookblock').children('.bb-item').eq(0).css('display'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bb-bookblock" class="bb-bookblock bb-vertical" >     
    <div class="bb-item" style="display: block;"> </div>
    <div class="bb-item" style="display: none;"> </div>
    <div class="bb-item" style="display: none;"> </div>
    <div class="bb-item" style="display: none;"> </div>
    <div class="bb-item" style="display: none;"> </div>
    <div class="bb-item" style="display: none;"> </div>
</div>

jQuery API Links

More info on .css()

More info on .eq()

More info on .first()