How to select a div with specific css property

Question

//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...

Note that in HTML4, IDs should begin with a letter. HTML5 is more permissive, but CSS won't target an ID that begins with a number. — enguerranws
– enguerranws, Commented Jul 22, 2014 at 10:56

Rajaprabhu Aravindasamy · Accepted Answer · 2014-07-22 10:53:07Z

6

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

answered Jul 22, 2014 at 10:53

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Damkulul Over a year ago

Thank you, will accept it as an answer in a few minutes :)

Bhushan Kawadkar · Accepted Answer · 2014-07-22 10:53:41Z

5

Try this : :visible selector for div

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

answered Jul 22, 2014 at 10:53

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

Amit · Accepted Answer · 2014-07-22 11:06:11Z

0

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

answered Jul 22, 2014 at 11:06

Amit

1,9191 gold badge20 silver badges37 bronze badges

Comments

ChoiBedal · Accepted Answer · 2014-07-22 11:07:22Z

0

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

answered Jul 22, 2014 at 11:07

ChoiBedal

1117 bronze badges

Collectives™ on Stack Overflow

How to select a div with specific css property

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related