CODEWITHSUNDEEP
javascriptjquerycss
Damkulul
Damkulul

Reputation: 1476

How to select a div with specific css property

//style
.TemplateBox1{display:none;} 

//Html
<div class="TemplateBox1" id="9">  1 </div>
<div class="TemplateBox1" id="10"> 2 </div>
<div class="TemplateBox1" id="11"> 3 </div>

//jQuery
$('div', this).each(function (e) { //Do something  });

This is a part from my code, at start the divs display (CSSproperty) is none (not shown) and after the user click on a certain button the property of the div changed to block (shown). I need to select only the divs that their property is display:block using jQuery, I tried :

$('div', this).**css("display")=="block"**.each(function (e) { //Do something  }); - didn't work..

What do I need to add to my jQuery...

Upvotes: 2

Views: 298

Answers (4)

ChoiBedal
ChoiBedal

Reputation: 111

Why not use pure JS ? 

var list = document.getElementsByTagName("div");
foreach(var i = 0;i < list.length, i++)
{ 
   if(list[i].style.display == "block")
    {
      // do Something;
    }
}

Upvotes: 0

Amit
Amit

Reputation: 1919

one way is $('div:visible')

another way is (Demo)

$('.TemplateBox1', this).each(function (e) {
    var $css = $(this).css('display');
    if($css == 'none'){
        $(this).css('display','block')
    }
});

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : :visible selector for div

$(this).find('div:visible').each(function(){
 // do stuff here
});

Upvotes: 5

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try to use :visible selector,

$('div:visible')

It seems that you are using TemplateBox1 class to hide those elements, so you can write in this manner too, that is by using :not() selector

$('div:not(.TemplateBox1)')

Upvotes: 6

Related Questions