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.

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