MooTools Pseudo Selectors Gone Wild
Written by David Walsh on December 15, 2008 · 6 Comments
Over the past few weeks, I've covered how you can create your own pseudo selectors in MooTools. In looking at jQuery's documentation and considering other often-checked element traits, I've created a bunch more useful MooTools pseudo selectors.
The MooTools JavaScript
/* grab "checked" elements */
Selectors.Pseudo.checked = function() {
return ('input' == this.get('tag') && ('radio' == this.get('type') || 'checkbox' == this.get('type')) && this.checked);
};
/* grab "selected" option elements */
Selectors.Pseudo.selected = function() {
return ('option' == this.get('tag') && this.selected);
};
/* grab random elements */
/* credit: http://blog.kassens.net/custom-pseudo-selectors */
Selectors.Pseudo.random = function(probability, local) {
return Math.random() < (probability || .5).toFloat();
};
/* grab elements with no value */
Selectors.Pseudo.noValue = function() {
return '' === this.value;
}
/* grab elements with a specific empty attribute */
Selectors.Pseudo.emptyAttribute = function(att) {
return this.get(att) == '';
}
/* grab disabled elements */
Selectors.Pseudo.disabled = function() {
return this.disabled;
}
/* grab enabled elements */
Selectors.Pseudo.enabled = function() {
return !this.disabled;
}
/* grab each type of input */
['text','password','radio','checkbox','submit','image','reset','button','file','hidden'].each(function(type) {
Selectors.Pseudo.(type) = function() {
return type == this.get('type') && 'input' == this.get('tag');
}
});
/* form element ? */
Selectors.Pseudo.input = function() {
return 'textarea' == this.get('tag') || 'select' == this.get('tag') || 'input' == this.get('tag') || 'button' == this.get('tag');
}
Have any more to add to the pile? Share them!
Without steering away from the subject too much, what about grabbing all elements that have an event attached to them?
@Anton: Great question. I’ll be researching this very soon, as I too have interest in such a functionality.
I am a RSS feed subscriber and I don’t miss a day without visiting this blog: your MooTools tips are tremendous! and this one is very useful!
Thanks! :)
For selecting all headers in order. like jQuery: $(“:header”)
Selectors.Pseudo.header = function() {return this.get('tag') == "h1" || this.get('tag') == "h2" || this.get('tag') == "h3" || this.get('tag') == "h4" || this.get('tag') == "h5" ||this.get('tag') == 'h6'
}