checking html/css attribute value using jQuery

Question

I am developing web site using jQuery and other tech. I have problem in selector as below.

My page contains a div with id='tblData'. Inside #tblData I have created multiple tables with class='data'.

Inside a table (.data), i have created multiple tr and td. Some of these td have class='vis'.

I am changing display property of these td.vis dynamically from block to none as per my requirement.

When page loads I want to loop through all elements. My condition is that I want to loop through all td's inside table (with class='data') whose display property is not none.

I am writing following code but it doesn't work.

$("div#tblData .data td[class='vis']").each(function (i) {  
    if ($(this).attr('display') != "none") {
        if ((i % 2) == 0) {
            $(this).removeClass("comparecontent2").removeClass("comparecontent1").addClass("comparecontent2");  
        } else {
            $(this).removeClass("comparecontent2").removeClass("comparecontent1").addClass("comparecontent1"); 
        }
    }
});  

alert($("div#tblData .data td[class='vis']").size()); // shows zero while 'alert($("div#tblData .data td").size())';
                                                      // returns right count.

initially td's display property is not set and later its changes to none — Kaushikkumar Halvadia
– Kaushikkumar Halvadia, Commented Oct 10, 2011 at 9:05

jantimon · Accepted Answer · 2011-10-10 07:26:21Z

1

Use one of those two commands:

.is(":hidden")
.filter(":hidden")

http://api.jquery.com/hidden-selector/

e.g.

  $(this).is(":hidden")

or

  $("td:hidden")

answered Oct 10, 2011 at 7:26

jantimon

38.5k23 gold badges127 silver badges195 bronze badges

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

2 Comments

T.J. Crowder Over a year ago

You're missing the colon on the selector in the is example. The way you have it, it's looking to see if it's a hidden element (e.g., like checking if it's a div element). Edit: Ah, you've fixed it now.

jantimon Over a year ago

Yeah I just came out of my bed ;)

T.J. Crowder · Accepted Answer · 2011-10-10 07:26:06Z

1

"display" isn't an attribute, it's a style property. You could use this.style.display, but you may want jQuery's :visible selector instead. Note that the :visible selector checks things other than just the display style property, but they're mostly things you probably want to check. Has more overhead, but unless you're in a really tight loop that probably doesn't matter.

So either:

if (this.style.display != "none")

Or:

if ($(this).is(':visible'))

answered Oct 10, 2011 at 7:26

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Collectives™ on Stack Overflow

checking html/css attribute value using jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related