Make Jquery Throw Error When It Doesn't Match An Element

Usually, when I'm selecting an element with jQuery, I would prefer it give me an error if it doesn't find matching element. For example, I just had a bug where this failed because

Solution 1:

You could make a plugin to use to ensure that the jQuery object is not empty:

$.fn.ensure = function() {
  if (this.length === 0) throw"Empty jQuery result."returnthis;
}

Usage:

$('ul.some-list').ensure().append(listItem);

Solution 2:

In my case, I wanted it automatically applied to everything, so I modified the jQuery constructor. I suggest you only use this during development to catch mistakes, but keep it out of your production so as not to confuse others. As it's not an error, I've just used console logging. However I've added a commented out throw in case you would rather use that:

var jQueryInit = $.fn.init;

$.fn.init = function(arg1, arg2, rootjQuery) {
    var element = newjQueryInit(arg1, arg2, rootjQuery);
    if (arg1 && element.length === 0) {
        console.log(arg1 +" doesn't exist");
        // throw arg1 +" doesn't exist"
    }
    return element;
};

I really wish there was an option in jQuery for turning this on during dev.

In case anybody is wondering... having the selector return a result set, when there are no valid matches, is a deliberate decision by the developers of jQuery. It means you can apply some code to a collection of elements, even if there is a possibility of there being none. A good example is comments on a page, or checked checkboxes. If it threw an error when there were no were elements found, then you would have to add checks for existence to your code. The following topic has more info: https://stackoverflow.com/a/3709823/109561

This is great feature for keeping production code lean. However it can really bite you in the ass while developing if you make a small typo; or if you try selecting an ID named "foobar" when you should be selecting a class called "foobar".