Question

I’m looking to override the base jQuery selector so that all CSS classes ( $('.classname') ) in any jQuery selector, including .find(.classname), .parents(.classname), etc, are prefixed with a ‘namespace’. In the above example my jQuery code would look like, $('.classname'), but that would be translated to $('.SomeCssNamespace_classname').

The HTML that the $('.classname') selector would match would look like this:
<div class="SomeCssNamespace_classname" />

Most importantly is that I would have to add the smarts, maybe in the form of a regex, that would only do this for classnames, not id’s or tag selectors. e.g. $('#someId') would not be translated to $('#SomeCssNamespace_someId').

Additionally, the jQuery.addClass() and jQuery.removeClass() methods would have to be overridden to prepend the same namespace.

Answer 1

My solution would be to write your own functions to do this… for example:

prefixClassSelector = function(prefix,class_name) {
    return $('.' + prefix + '_' + class_name);
}

then you can call it like this, and it’s still chainable

prefixClassSelector('someNamespace','myclass').hide();