arnklint Challenges, overcomings, thoughts and inspiration.

Custom jQuery selectors

I find that a lot of times you want to use jQuery selectors that are a bit messy on a couple of places. Making your own selectors tidies your code and makes it DRY.

DRY up your JavaScript code using your own custom selectors

jQuery is starting to be really enjoyable. This is an easy peasy way to make your own custom selector, which could be used to extract elements in a cleaner way. This also allows you to find any type of element based on one or more attributes which you couldn’t use the included selectors to find.

$.expr[':'].my_elements = function(obj){
  var $this = $(obj);
  return ($this.attr('special_attribute') != '');
};

Then you can use your homebrewed selector the same way you would use the pre defined:

$('h1:my_elements').css({color: "green"});