Projects
  Site > Home > Projects > jQuery > attrNameBegins   
jQuery Plug-in "attrNameBegins" (Custom Selector)

Overview

This custom selector is intended to be used with HTML 5 "custom attributes", which begin with "data-". The defineDatasets plug-in doesn't use this plug-in, primarily as a speed optimization and for ease-of-use, but you could use them together, if you want. (They're compatible.)

Unlike "[someattr$=myprefix]", which checks that the value of attribute "someattr" begins with prefix "myprefix", this selector ":attrNameBegins(myprefix)" checks whether the name of any attribute of the element begins with "myprefix". The resulting wrapped set jQuery object will contain only elements that have attributes beginning with the prefix you specify.

Furthermore, it's guaranteed that the attribute will be longer than the prefix. The reason is, it's intended to filter on namespaced attribute names. 99.9% of the time, you want to access the rest of the attribute name after the namespace prefix. So it's optimized for that.

If you need to allow the possibility that the entire attribute name actually is the prefix you specify, all you have to do is shorten the prefix by one character and do that sort of special-case testing yourself. (That makes more sense than requiring additional length testing in the more general case.)

Examples

Since this selector was written to define the dataset object for elements that have HTML 5's custom attributes (data-xxx="yyy"), this is an example of that very usage:

<script src="jquery.js"></script>
<script src="jquery.attrNameBegins.js"></script>
<script>

$(document).ready(function()
    {
    $("*:attrNameBegins(data-)").each(function()
        {
        // Code to define "this.dataset" goes here. 
        });
    });

</script>

It can also be used to namespace your HTML 5 custom attributes themselves. For example, suppose you have custom attributes for forms and CSS. To avoid naming conflicts, you can prefix the form-related ones with data-form and the CSS-related ones with data-css.

<script src="jquery.js"></script>
<script src="jquery.attrNameBegins.js"></script>
<script>

$(document).ready(function()
    {
    $("*:attrNameBegins(data-form)").each(function()
        {
        // Code to do something specific for data-formSomething attributes goes here. 
        });
    });

</script>

Testing

Of primary concern is whether the references to pObj.attributes and pObj.attributes[i].nodeName are proper DOM references for the browser at hand. I have tested that attrNameBegins works correctly with the following browsers (note the absence of Windows MSIE 6):

  • Mac:
    • Firefox 3.5.6
    • Netscape 7.2
    • Opera 9.25
    • Safari 4.0.4
  • Windows:
    • Firefox 3.5.6
    • Google Chrome 3
    • MSIE 7
    • Netscape 7.1
    • Netscape 8.1
    • Opera 10.10
    • Safari 4.0.4

I tried to test using MSIE 6, but Windows Update upgraded me to MSIE 7 without even asking for my permission to do so. I sat through what seemed like HOURS of Windows Updates (because I don't use my Windows machine much), only to not have MSIE 6 anymore at the end of the process. Very frustrating. Very frustrating indeed. Especially when you consider that MSIE 6 is the browser most likely to have a DOM incompatible with this plug-in.

That said, you can do your own testing with the following hotlinks:

View Source

The following hotlinks pop up a new window containing the source code. Then you can do a File > Save As ... to save the source to your hard drive, if you like.

If you'd prefer to get these plugins from the plugins.jquery.com site, so that you can see and verify their MD5 hashes, for example, the following hotlinks pop up a new window containing the plugins.jquery.com URLs: