There are tons of posts around which bang on about how to extend jQuery to include your own selectors, but to find one that actually explains your options is a pain, hence this post.

jQuery has an extend function baked in which looks something like $.extend(target, object1, object2); and will extend target (which should be an object) with the properties and methods of object1 and object2. You can add as many additional objects (think object3, object4 and object5) to the end as you like.

What we want to do it extend a very specific part of jQuery itself. The $.expr[‘:’] object which stores the built in selectors and any we add.

Indeed when you console.log($.expre[‘:’]) you see a full list of the selectors available in the version of jQuery you are using:

The first thing you will notice about the above is that the selector function takes up to (although may need fewer) four argument; e, i, m and s.

e is the element currently being checked.
i is the index of that elements within all elements being checked (starts at zero)
m stands for match and is additional information that we can use in our function.
s stands for stack and is all elements in the current selection or stack

so $(e) makes the current element e into a jQuery object
i allows us to check for the 3rd, 6th, 23rd thing
m contains the following:

[0] is the actual selector called. For example :anyof(“div,4,hr,10″)
[1] is just the selector name. For example: anyof
[2] is the type of quotes used (if any) in the selector. So ” would be returned for :anyof(“div,4,hr,10”)
[3] is any parameters used in the form of a string so “div,4,hr,10” from above

and s contains an array of one or more html elements.

So now we know what is actually returned we can write a cleverer selector…

The above selector will check all other elements in the stack and return only those with a unique tag. We could expand it to check other things about the element to see if it is truly unique such as it’s classes or styles.

NB: I haven’t checked all the code above and certainly haven’t optimised it, but it is likely to work as is or with a small number of fixes.

So now we have something to focus our plugin at we can add a prototype method to it. This makes the ‘new Boom’ code super slick and gives us a better control over the ‘this’ variable because we can whack it inside a function…

Boom.prototype = {
init:function(type, element, options)
{
// do stuff on create
// makes it available almost anywhere as this.$element
this.$element = $(element);
// then maybe do something with the options
},
another_one:function()
{
// do some other clever stuff.
}
};

I came across a curious issue today. You can’t select a period of time over which to fade out and fade in Twitter Bootstrap buttons.

If you apply jQuery fadeTo() or animate() they fade out and they fade in, but they do it in their own time.

This may be related to a css transition which is applied in the bootstrap css, I haven’t had a chance to look, but the workaround for me is to put the button in a span and fade the span in and out instead.