jquery: custom selector not working

Question

I am trying to create a custom jquery selector to return the bool of css("visibility") == "inherit" but it doesn't seem to be working. Below is the code...

$.expr[":"].crazyvisible = function(a) {
    var elem = $(a);
    return (elem.css("visibility") == "inherit");
};

This is the code I'm using the selector in (i've also tried live)...

$(document).ready(function() {
    $("span#Request1_multiconditionvalidator2").delegate(":crazyvisible","attachErrorMessage", function() {
        ...
    }
}

Answer 1

There's nothing wrong with your selector or your .delegate() call as far as I can tell. The problem is that the .css() function returns the computed style of an element, so you will never get 'inherit' as the value because that's then computed to whatever style an element's parent has instead.

You can find more info on checking inherited CSS properties using jQuery in this question — in short, though, it's not easy to do so.

EDIT: if you only need to know if an element isn't 'hidden', whether inherited or not, you can just do this:

$.expr[":"].crazyvisible = function(a) {
    var elem = $(a);
    return elem.css("visibility") != "hidden";
};