Using jQuery to select custom fbml-like tags

Question

FBML is using tags like <fb:like></fb:like> <fb:board></fb:board>, etc..

How are they selecting these? I've tried $('fb') and $('fb:like'), both return an empty object... does anyone know how this can be done for and ?

Answer 1

Your problem could be that jQuery doesn't use the "*NS" flavor of DOM selectors (e.g. getElementsByTagName versus getElementsByTagNameNS).

I wrote a hack a while ago for imbuing jQuery with that capability (especially for an XHTML context). You might be able to tailor it to your own needs:

https://gist.github.com/352210

/**
* Hack to allow jQuery to work within XHTML documents that define an xmlns
*/

/**
* Use the given object to override the given methods in its prototype
* with namespace-aware equivalents
*/
function addNS(obj, methods) {
    var proto = obj.constructor.prototype;
    var ns = document.documentElement.namespaceURI;

    for (var methodName in methods) {
        (function () {
            var methodNS = proto[methodName + "NS"];

            if (methodNS) {
                proto[methodName] = function () {
                    var args = Array.prototype.slice.call(arguments, 0);
                    args.unshift(ns);
                    return methodNS.apply(this, args);
                };
            }
        })();
    }
}

// Play nice with IE -- who doesn't need this hack in the first place
if (document.constructor) {
    // Override document methods that are used by jQuery
    addNS(document, {
        createElement: 1,
        getElementsByTagName: 1
    });

    // Override element methods that are used by jQuery
    addNS(document.createElement("div"), {
        getElementsByTagName: 1,
        getAttribute: 1,
        getAttributeNode: 1,
        removeAttribute: 1,
        setAttribute: 1
    });
}

Answer 2

for example this,

<fb:like href="http://google.com" layout="box_count" show_faces="false" width="450"></fb:like>

quoted

/*

If you wish to use any of the meta-characters 
( such as !"#$%&'()*+,./:;?@[\]^`{|}~ ) as a literal part of a name, 
you must escape the character with two backslashes: \\. For example, 
if you have an an element with id="foo.bar", you can use the selector 
$("#foo\\.bar"). 

*/

demo