checking html/css attribute value using jQuery

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 prop开发者_运维问答erty 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.

---

Use one of those two commands:

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

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

e.g.

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

or

  $("td:hidden")

---

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